HTML怎么实现抽奖变色,html+css+js实现简单抽奖

HTML

L

Document

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.οnclick=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.οnclick=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);

};