js满足条件时更换图片并且实现图片闪烁

Question

1 . 这是一个广播状态 , 默认是灰色的

<div class="huatongState fl">
<div><img src="../static/images/huatong_grey.png" th:src="@{/images//huatong_grey.png}" name = "micro" id ="micro" /></div>
<p class="p_b">广播状态</p>
</div>

2 . 需求是开启广播后有一个js , 里面需要在倒计时内时 , 更换广播状态图标 并且闪烁 效果

/* 开启通道 */
function startAisle() {
    $(".p_b.text-red").show();
    $(".p_b.text-green").hide();
    $(".active").attr("class", "active_a");
    $(".active_b").attr("class", "active_c");

    // 获取复选框中选中的信息 , 传到后台
    // 根据name的值获取到所有选中checkbox，并遍历
    $('input[name="station_name"]:checked').each(function(i) {
        if (this.checked) {
            // arr.push($(this).val());
            stationValue[i] = $(this).val();
        }

    });
    console.log(stationValue)
    console.log(areaValue)

    $('input[name="area"]:checked').each(function(i) {
        if (this.checked) {
            // arr.push($(this).val());
            areaValue[i] = $(this).val();
        }

    });
    console.log(areaValue)
    $.ajax({
        data : {
            'stationValue' : stationValue,
            'areaValue' : areaValue
        },
        type : "get",
        url : "/PaStation/getStationNameAndAera",
        dataType : "text",
        traditional : true
    /*
     * success: function (data) { console.log(data) }, error:function (data) {
     * console.log(data) }
     */
    })

    clearTimeout(ts);
    ;
    (function loop() {
        $(".p_b.text-red span").text(time--);
        if (time >= 0) {
            // 1. 话筒闪烁

            /*var pic = document.getElementsByName("micro");

            pic.find('img').attr('src','../images/huatong_yellow.png');


            setInterval('run()',1000);*/

            ts = setTimeout(loop, 1000);
        } else {

            // 倒计时结束
            clearAisle();

        }
    })();

1. 自己写了好多次都有问题 , 麻烦大佬帮忙看一下

2. 补充一下遗漏的代码 .....

/*function run()
{
    var imgid=document.getElementById("imgid");

     if(imgid.visibility == "visible")

       imgid.visibility = "hidden";

     else

       imgid.visibility = "visible";

    // setTimeout('run()',300);

      }*/

Answer 1

你发的代码还是不完整，我没法调式代码，大致是这样：

    clearTimeout(ts);
    $("#micro").attr('src','../images/huatong_yellow.png');
    var imgid=document.getElementById("imgid");
    ;(function loop() {
        $(".p_b.text-red span").text(time--);
        run();
        if (time >= 0) {
            ts = setTimeout(loop, 1000);
        } else {
            imgid.style.visibility = "visible";
            clearAisle();
        }
    })();

function run()
{
    if(imgid.style.visibility != "hidden")
       imgid.style.visibility = "hidden";
    else
       imgid.style.visibility = "visible";
}