js实现随机抽奖效果

html部分：

<div class="box">
	<ul id="ul">
	</ul>
	<div class="box2">
		<input type="button" value="开始">
		<input type="button" value="暂停">
	</div>
</div>

css部分：

.box{
			width:500px;
			margin:0 auto;
		}
		.box ul li{
			list-style: none;
			width:100px;
			height:50px;
			text-align: center;
			line-height: 50px;
			float: left;
		}
		.bgColor{
			background: pink;
		}
		.box2 input{
			width:80px;
			height:50px;
			line-height: 50px;
		}

js部分

var names =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
		ul = document.getElementById("ul"),
		index = 0,
		len = names.length,
		btn1 = document.getElementsByTagName("input")[0],
		btn2 = document.getElementsByTagName("input")[1];

	for(var i=0;i<len;i++){
		ul.innerHTML += "<li>"+names[i]+"</li>";
	}
	var lis = ul.getElementsByTagName("li");
	// console.log(lis[0]);
	var id=null;
    function changeBtn(){
		 id = setInterval(function(){
			for(var j=0;j<len;j++){
				lis[j].className="";
			}
			lis[index].className = "bgColor";
			index++;
			if(index==len){
				index=0;
			}
		},100);
	}
	//停止
	btn2.onclick = function(){
		clearInterval(id);
	}
	var k=0;
	//开始
	btn1.onclick = function(){
		if(k){
			clearInterval(id);
		}
		changeBtn();
		k++;
	}