使用JS实现一个简单的抽奖系统

HTML样式

 <ul id='uls'>
		<li>谢谢惠顾</li>
		<li>100元优惠券</li>
		<li>200元优惠券</li>
		<li>700元优惠券</li>
		<li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li>
		<li>300元优惠券</li>
		<li>600元优惠券</li>
		<li>500元优惠券</li>
		<li>400元优惠券</li>
	</ul>

CSS样式

*{
			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;
        }

JS片段

 let btn1=document.getElementById("btn1");
		let btn2=document.getElementById("btn2");
		let arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转
		let lis=document.getElementsByTagName("li");
        
		let 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)
            console.log(num);
		}
		btn2.onclick=function(){
			btn1.disabled=false;
			clearInterval(time);
            if(num==0){
                alert('不好意思，您没中奖')
            }else{
                alert('恭喜您获得'+num+'00元的优惠券');
            }
           
            
		}