html+css+js实现简单抽奖

HTML

  
    L
    
        
        
        
    
    
    

        
10元
        
800元
        
1000元
        
80元
        
开始
            停止
        
600元
        
60元
        
100元
        
20元
    
 
    
    
    
    
    
    

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

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";
        console.log(lis[arr[num]].className);
    },30);

};
btn2.onclick=function(){
    // var loc = location.href;
    // var n1 = loc.length;//地址的总长度
    // var n2 = loc.indexOf("=");//取得=号的位置
    // var username = decodeURI(loc.substr(n2 + 1, n1 - n2));//取=号后面的内容
    // document.getElementById("username").value = username;
   // console.log(username);
   //  var obj = document.getElementById("uls").getElementsByTagName("li");
    setTimeout(function(){ clearInterval(time); },0);
        btn1.disabled=false;
    // var prize= obj[arr[num]].innerHTML;
    // alert(prize);

    };