控制警灯颜色变化

通过css样式控制图片

<style>
	.red{
            height: 200px;
            width: 150px;
            background-image: url(img/1.png);
            border-radius: 100px 100px 0px 0px;
        }
        .blue{
            height: 200px;
            width: 150px;
            background-image: url(img/2.png);
            border-radius: 100px 100px 0px 0px;
</style>
————————————————
版权声明：本文为CSDN博主「qq_45746493」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45746493/article/details/102717553

控住打开与关闭按钮实现灯光的闪烁

<script>
	    var interval;
    //打开定时器
    function open(){
        if(interval != undefined){
            alert("已经启动！")
        }else{
            interval =  setInterval(function(){
                $("div").toggleClass("blue");
            },200);
        }
    }
    //关闭定时器
    function close(){
        clearInterval(interval);
        interval = undefined;
    }
    //jquery dom节点加载完毕执行
    $(function(){
        //关闭按钮绑定点击事件
        $("#close").click(function(){
            close();
        });
        //打开按钮绑定点击事件
        $("#open").click(function(){
           open();
        });
    })
</script>



效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191025130203946.gif)