<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jQuery.js"></script>
<style>
.blue{
width: 30%;
height: 200px;
background-color: blue;
}
.red{
width: 30%;
height: 200px;
background-color: red;
}
p{
text-align:left;
}
input{
width: 100px;
height: 32px;
}
</style>
</head>
<body>
<div class="blue"></div>
<p>
<input type="button" class="begin" value="开始" >
<input type="button" class="pause " value="暂停">
</p>
<script type="text/javascript">
var interval;
//默认是启动的
interval = setInterval(function() {
$("div").toggleClass("red");//如果存在(不存在)就删除(添加)一个类
}, 640);
//开始
$(function() {
$(".begin").on("click", function() { //绑定点击事件
interval = setInterval(function() {//间隔指定的毫秒数不停地执行指定的代码;setInterval(函数,毫秒数)
$("div").toggleClass("red");
}, 560);
});
});
//暂停
$(function() {
$(".pause").on("click", function() {
clearInterval(interval);//clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
});
});
</script>
</body>
</html>
效果