控制按钮点击事件完成警灯开关效果

JQuery控制按钮点击事件完成警灯开关效果

以下效果是点击按钮来控制警灯的开关效果，效果比较简单，有问题请指出，先演示下效果图，待你们细心观看。
1、以下是效果图

2、整体思路，用定时器来控制css样式的来回切换时间设定为1秒，然后用jquery获取点击开启按钮事件来绑定是否启动颜色切换，然后绑定取消按钮关闭定时器即可。
3、以下是css样式代码

<style type="text/css">
			.blue{
				height: 40px;
				width: 40px;
				background-color: blue;
				border-radius: 20px 20px 2px 2px;
				position: absolute;
				left: 90px;
			}
			.red{
				height: 40px;
				width: 40px;
				background-color: red;
				border-radius: 20px 20px 2px 2px;
				position: absolute;
				left: 90px;
			}
			img{
				height: 200px;
				width: 250px;
				margin-top: 14px;
			}
			.left{
				margin-left: 80px;
			}
		</style>

4、下面是html代码

<div class="blue"></div>
		<div class="but">
			<img src="img/c1859260242ec0c9e3e86fca1c67bfbd.png" />
		</div>
		<div class="left">
			<input type="button" value="开启" id="clos" />
			<input type="button" value="关闭" id="open" />
		</div>

5、下面是js和jQuery代码

<script type="text/javascript">
			var interval;
			function clos(){
				if(interval!=undefined){
					alert("你已经启动");
				}else{
					interval = setInterval(function(){
				$(".blue").toggleClass("red");
				},100);
			}
			}
				
			function open(){
				clearInterval(interval);
				interval = undefined;
			}
			$(function(){
				$("#clos").click(function(){
					clos();
				});
				$("#open").click(function(){
					open();
				});
			})
			
			
		</script>

谢谢大家的观看，如做的不好请指出