版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<style>
.blue{
width: 50px;
height: 65px;
background-color: blue;
border-radius: 50px 50px 2px 2px;
margin-left: 70px;
}
.red{
width: 50px;
height: 65px;
background-color: red;
border-radius: 50px 50px 2px 2px;
}
img{
width: 200px;
height: 150px;
}
</style>
<body>
<div class="blue" ></div>
<input type="button" id="close" value="关闭警灯" />
<input type="button" id="open" value="打开警灯" />
<script type="text/javascript">
var interval;
//打开定时器
function open(){
if(interval!=undefined){
alert("已经启动!");
}else{
interval = setInterval(function(){
$("div").toggleClass("red");
},70);
}
}
//关闭定时器
function close(){
clearInterval(interval);
interval = undefined;
}
//dom 节点加载完毕执行
$(function(){
$("#close").click(function(){
close();
});
$("#open").click(function(){
open();
});
});
</script>
</body>
</html>