jQuery清爽的点名抽奖游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery清爽的点名抽奖游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQuery清爽的点名抽奖游戏代码</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#box{width:300px;height:100px;position:absolute;left:500px;top:200px;background:#5BD6F9;font-size:50px;text-align:center;line-height:100px;color:#FFFFFF;border-radius:10px;}
#jiang{width:300px;height:50px;background:red;position:absolute;left:500px;top:320px;border-radius:10px;text-align:center;line-height:50px;color:#FFFFFF;font-size:20px;}
#ji{width:300px;height:50px;background:pink;position:absolute;left:500px;top:400px;border-radius:10px;text-align:center;line-height:50px;color:#FFFFFF;font-size:20px;}
</style>
</head>
<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<div id = "box">26班点名册</div>
<div id="jiang"></div>
<div id="ji"></div>

<script type="text/javascript">
//设置显示的所有抽奖名字
list = ['小名','小白','小黑','小红','小绿','小青','小猪',];
//最终抽奖结果会从下面的这个数组里选出
lis = ['小念','小狗狗'];

$('#start').click(function(){
	$('#jiang').html('等待抽奖中');
	immer = setInterval(function(){
		num = Math.floor(Math.random() * list.length);        
		$('#box').html(list[num]);
	},30)
});

$('#stop').click(function(){
	clearInterval(immer);
	num1 = Math.floor(Math.random() * lis.length);
	$('#box').html(lis[num1]);
	//设置抽奖结果
	li = ['跳芭蕾舞','跳脱衣舞','一等奖','跳钢管舞'];
	(function(){
		se =  setInterval(function(){
			nu = Math.floor(Math.random() * li.length);
			$('#jiang').html(li[nu]);
		},30);
	})();
});
</script>

<script type="text/javascript">
setInterval(function(){
	var time = new Date();
	var y = time.getFullYear();
	// 月份取值 0-11  
	var m = time.getMonth() + 1;
	var d = time.getDate();
	var h = time.getHours();
	var i = time.getMinutes();
	var s = time.getSeconds();

	$('#ji').html(y + '/' + m + '/' + d + ' ' + h + ':' + i + ':' + s);
	if(s > 0){
		clearInterval(se); 
	}
},1000);
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)