html+css+js实现抽奖功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/78436367
html+css+js实现抽奖功能
一、代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#uls{
			width: 500px;
			height: 500px;
			margin: 50px auto;
		}
		li{
			width: 150px;
			height: 150px;
			background: skyblue;
			float: left;
			list-style: none;
			margin:5px;
			color: #fff;
			text-align: center;
			line-height: 150px;
			font-size: 20px;
			font-weight: bold;
		}
		#uls li button{
			width: 50px;
			height: 30px;
		}
		.light{
			width: 150px;
			height: 150px;
			background: #666;
			color: #fff;
		}
	</style>
</head>
<body>
	<ul id='uls'>
		<li>600元优惠券</li>
		<li>800元优惠券</li>
		<li>1000元优惠券</li>
		<li>800元优惠券</li>
		<li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li>
		<li>600元优惠券</li>
		<li>600元优惠券</li>
		<li>1000元优惠券</li>
		<li>800元优惠券</li>
	</ul>
	<script>
		var btn1=document.getElementById("btn1");
		var btn2=document.getElementById("btn2");
		var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转
		var lis=document.getElementsByTagName("li");
		var num=0;  //定义初识下标
		btn1.onclick=function(){
			btn1.disabled=true;
			time=setInterval(function(){
				lis[arr[num]].className="";
				num++;
				if(num>7){
					num=0;
				}
				lis[arr[num]].className="light";
			},50)
		}
		btn2.onclick=function(){
			btn1.disabled=false;
			clearInterval(time);
		}
	</script>
</body>
</html>
二、效果预览


展开阅读全文

没有更多推荐了,返回首页