用 js jquery 实现警灯效果

html 部分

<div class="blue"></div>
<br/>
<input type="button" id="close" value="关闭"/>
<input type="button" id="open" value="打开"/>

css 样式

	.blue{
            height: 70px;
            width: 50px;
            background-color: blue;
            border-radius: 20px 20px 2px 2px;
        }
        .red{
            height: 70px;
            width: 50px;
            background-color: red;
            border-radius: 20px 20px 2px 2px;
            }

javascript 部分

 //定义定时器对象
    var interval;
    
    //打开定时器
    function open(){
    if(interval != undefined){
            alert("已经启动！")
        }else{
        interval = setInterval(function(){
                $("div").toggleClass("red");
            },100);
          }
      }

	//关闭定时器
    function close(){
        clearInterval(interval);
        interval = undefined;
        }
        
	// jquery dom 节点加载完毕执行
    $(function(){
	 //关闭按钮绑定点击事件
        $("#close").click(function(){
            close();
        });

	 //打开按钮绑定点击事件
        $("#open").click(function(){
            open();
        });
      });
        

效果图