原生js简易转圈抽奖

css

<style>
			td{
				height: 50px;
				width: 50px;
			}
</style>

html

<table border="1px">
</table>

js：

定时器一定要遵守先清后设

<script>
			var table = document.getElementsByTagName("table")[0];
			for(var i = 0;i<5;i++){
					var tr = document.createElement("tr");
				for(var j = 0;j<5;j++){
					
					var td = document.createElement("td");
					tr.appendChild(td);
					if(i==0||i==4){
						td.setAttribute("class","chose")
					}
					else if((j==0||j==4)&&(i==1||i==2||i==3)){
						td.setAttribute("class","chose")
					}else if(j==2&&i==2){
						td.setAttribute("id","begin");
					}
					else{
						td.style.border="2px solid white";
					}
				}
				table.appendChild(tr);
			}
			var begin = document.getElementById("begin");
			var chose = document.getElementsByClassName("chose");
			var  num = 0;
			var arr  = [0,1,2,3,4,6,8,10,15,14,13,12,11,9,7,5];
			var time;
	
			begin.onclick = function(){
				time = setInterval(function(){
						if(num>=1){
						chose[(arr[num-1])].style.backgroundColor="white";
						
						}
						
						if(num==0){
						chose[5].style.backgroundColor="white";}
						chose[arr[num]].style.backgroundColor = "red";
						num++;
						
						if(num>=chose.length)
						{						
							num=0;
							//chose[0].style.backgroundColor="red";				
						}
					
					},100)
				var ran = Math.random()*5000+3000;
				setTimeout(function(){
					clearInterval(time);
				},ran)
			}
			
		</script>