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

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个回答

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

    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";
}

WeGazeu
烛未 谢谢大佬 这个问题前一段时间弄好了 谢谢
9 个月之前 回复
WeGazeu
烛未 大佬 我补充了一下代码 , 麻烦过目
9 个月之前 回复
WeGazeu
烛未 话筒闪烁的代码被我注释掉了 , 就在第二个代码块后半部分 , 麻烦看一下
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
用js怎么实现根据图片路径获得图片的像素值和分辨率?
-
点击图片实现链接复制
-
js 能实现检测连接超时5秒就回退 并提示连接超时吗?
-
问一个图片问题,如果我想在所有的手机上都显示一样大的图片,请问要怎么实现。
-
css+js实现点击图片左右切换图片
-
jsp实现上传图片的功能。带有剪切图片的功能的纯js实现。谢谢~
-
JS做视频和图片瀑布流?成功后在额外补助。
-
通过js我已经实现了截取一定区域的图片(图片一共7张),如何把这些截取的图片保存到本地指定路径下
-
关于echarts图片导出Excel,图片失真
-
(小白)JS/JQ怎么实现点击一个小图标隐藏一个div并且图标更换为另一个
-
只用javascript实现图片轮换
-
js插入图片地址转换的问题
-
前端js 如何实现将一个轮盘旋转随机的角度?
-
JS实现点击图片可弹出大图
-
js 怎么实现每天随机生成一条格言?
-
javascript如何解析base64图片数据 并且将图片显示在网页中
-
js怎么实现按钮值的循环改变
-
html转word,保留样式和表格格式及图片,求demo
-
js拼接对象里面含数组的json数据?
-
Linux文件操作高频使用命令
文章目录0.新建操作:1.查看操作2.删除操作3.复制操作4.移动操作:5.重命名操作:6.解压压缩操作 0.新建操作: mkdir abc #新建一个文件夹 touch abc.sh #新建一个文件 1.查看操作 查看目录: ll #显示目录文件详细信息 查看文件内容: cat|head|tail命令 cat abc.txt #查看abc的内容 head -5 abc.txt #...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
【安全】Web渗透测试(全流程)
1 信息收集 1.1域名、IP、端口 域名信息查询:信息可用于后续渗透 IP信息查询:确认域名对应IP,确认IP是否真实,确认通信是否正常 端口信息查询:NMap扫描,确认开放端口 如果不会用Nmap,看这里:NMAP 基础教程(功能介绍,安装,使用) 发现:一共开放两个端口,80为web访问端口,3389为windows远程登陆端口,嘿嘿嘿,试一下 发现:是Window...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
Ubuntu 19.10 终极 美化 优化
Ubuntu终极美化 1.附上我的截图:
五款高效率黑科技神器工具,炸裂好用,省时间
loonggg读完需要4分钟速读仅需2分钟感觉我好久好久没有给大家分享高质量的软件和插件了。今天周末,难得在家休息一下,痛下决心,分享一些我认为的高效率工具软件给大家。废...
黑客入门,从HTB开始
Hack the box 是国外的一个靶机平台,里面的靶机包含多种系统类型,并且里面可以利用的漏洞类型多种多样,有很多靶机其实非常贴近实战情景。因此 HTB 是一个很好的学习渗透测试靶场。 之前在 HTB 也玩过一些机器。里面的机器难度有好几个档次,insane 难度的一般都是极其困难的,这种机器一般让我对着大神的 Writeup 我可能都没有办法复现出来。之前也有在公众号上分享过几篇 H...
动画:用动画给女朋友讲解 TCP 四次分手过程
作者 | 小鹿 来源 | 公众号:小鹿动画学编程 写在前边 大家好,我们又见面了,做为一个业余的动画师,上次的用动画的形式讲解 TCP 三次握手过程再各大平台收到了广大读者的喜爱,说文章有趣、有货、有内容,也受到了很多读者的关注。很多读者留言说什么时候用动画讲一讲 TCP 四次挥手的过程,为了应大家的要求,今天我们就生动有趣的用动画给大家分享 TCP 四次挥手(分手)过程。 动画:用动画给...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
SQL基本语法入门 看这里就够了
SQL执行顺序 第一步:执行FROM 第二步:WHERE条件过滤 第三步:GROUP BY 分组 第四步:执行SELECT 投影列 第五步:HAVING条件过滤 第六步:执行ORDER BY排序 一、创建、删除库 -- 创建新数据库 CREATE DATABASE 数据库名; -- 删除数据库 DROP DATABASE 数据库名; 二、增加 1、添加列名、设置主键、设...
面试最后一问:你有什么问题想问我吗?
尽管,我们之前分享了这么多关于面试的主题: 高薪必备的一些Spring Boot高级面试题 面试必问:设计模式遵循的面向对象设计原则! 面试必问:怎么保证缓存与数据库的双写一致性? 27道高频Spring面试题,你能答对几个? 唠唠面试常问的:面向对象六大原则 一文高效图解二叉树面试题 Java面试中最高频的那20%知识点是什么? 百度面试题:求数组最大值 ... 然而,最后这个90%可见...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
还在收集资料?我这里有个github汇总
原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处。国内程序员都喜欢收集资料,但是又不看,github是重灾区。更有莫名其妙fork的,让人不得要...
阿里编程规范(简化版)
阿里编程规范 及 阿里Java开发规约插件 Alibaba Java Coding Guidelines 统一规范标准将有助于提高行业编码规范化水平,帮助行业人员提高开发质量和效率、大大降低代码维护成本。 2017年年初,首次公开了《阿里巴巴Java开发手册》,自从第一个版本起,倍受业界关注。为了让开发者更加方便、快速的将规范推动并实行起来,阿里巴巴基于手册内容,研发了一套自动化的IDE检测插件(...
我们这类学生并不是一无是处
我们这类学生并不是一无是处,更何况,个别学生还很聪明,真的很聪明。 主观能动性在于自己,自己的人生自己把握。其实并不需要给自己那么大的压力,毕竟,你三年后拿到的录取通知书和你当前所处学校的环境及师资息息相关,换句话讲,你将来的大学录取通知书就是你当前学校的环境及师资的具体体现。千万不要夸大个人努力。个人努力固然重要,但我们都是平凡人,我们的先天环境都很一般,这就好比小学生在高考数学中取得高分...
相关热词 c# 增加元素 c#控制台简单加法 c# 服务端框架 c# 判断事件是否注册 c#中is和has c# udp 连接超时 c#词典 c#实现排列组合 c# oss 上传 c#判断输入的是否为ip