WeGazeu
烛未
采纳率100%
2019-02-18 09:46 阅读 1.1k

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

10

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);

      }*/
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    jslang 天际的海浪 2019-02-18 17:04

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

        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";
    }
    
    
    点赞 评论 复制链接分享

相关推荐