<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#zhongjiang{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="zhongjiang"></div>
<button id="J_start">开始</button>
<button id="J_stop">结束</button>
</body>
<script type="text/javascript">
$(function(){
var a = '';
var user = [];
var LIST = {
init : function(){
this.getData();
this.bindEvent();
},
getData : function(){
$.ajax({
type: "POST",
url: "choujiang.php",
async:false, //这里一定要有设置,下面return user,否则uer没有值
success:function(data){
user = JSON.parse(data);
}
});
return user;
},
startRotate : function(){
a = setInterval(function(){LIST.start()},100);
$("#J_start").unbind();
},
stopRotate : function(){
clearInterval(a);
$("#J_start").bind('click',function(){LIST.startRotate()});
alert($("#zhongjiang").text());
},
bindEvent : function(){
$("#J_start").bind('click',function(){LIST.startRotate();});
$("#J_stop").bind('click',function(){LIST.stopRotate();});
},
start : function() {
var sum = user.length;
var luckyuser = [];
var rand = Math.floor(Math.random()*sum);
$.each(user,function(i,n) {
if (rand == i) {
luckyuser = n;
}
});
$("#zhongjiang").empty().append(luckyuser.phone);
}
}
LIST.init();
})
</script>
</html>
采用bind方法,当点击开始后,去掉绑定的事件,点击暂停后,又将事件重新绑定,防止多次点击开始进行许多次的定时操作,这样就暂停不了了。