码迷,mamicode.com
首页 > 其他好文 > 详细

一个简单的中奖抽奖小程序

时间:2016-01-12 15:42:20      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:background   程序   function   ajax   

<!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方法,当点击开始后,去掉绑定的事件,点击暂停后,又将事件重新绑定,防止多次点击开始进行许多次的定时操作,这样就暂停不了了。

一个简单的中奖抽奖小程序

标签:background   程序   function   ajax   

原文地址:http://chenxiaolong.blog.51cto.com/8786841/1734134

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!