<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖活动</title>
<style>
table{
width: 256px;
height: 256px;
margin: 49px auto;
text-align: center;
border-collapse: collapse;
}
button{
display: block;
width: 100px;
height: 100px;
background-color: #ddd;
border-radius: 2px;
box-shadow: 0 0 4px red;
margin: -18px auto;
}
.box1{
background-color: #fff;
}
.box2{
background-color: #096;
}
</style>
</head>
<body>
<table border="2">
<tr>
<td class="box1">卡卡西</td>
<td class="box1">我爱罗</td>
<td class="box1">鸣人</td>
</tr>
<tr>
<td class="box1">佐助</td>
<td class="box1">自来也</td>
<td class="box1">大蛇丸</td>
</tr>
<tr>
<td class="box1">纲手</td>
<td class="box1">薛之谦</td>
<td class="box1">华晨宇</td>
</tr>
</table>
<button>开始抽奖</button>
<script>
var btn=document.getElementsByTagName("button")[0];
var oltd=document.getElementsByTagName("td");
var content=["卡卡西","我爱罗","鸣人","佐助","自来也","大蛇丸","纲手","薛之谦","华晨宇"];
btn.onclick=function(){
console.log(btn.innerHTML);
if(btn.innerHTML=="开始抽奖"){
time=setInterval(function(){
for(i=0;i<9;i++){
document.getElementsByTagName("td")[i].className="box1";
}
var tdname = document.getElementsByTagName("td")[parseInt(Math.random()*content.length)];
var value=content[parseInt(Math.random()*content.length)];
console.log(value);
if (tdname.className=="box1"){
tdname.className="box2";
}else if(tdname.className=="box1") {
tdname.className="box2";
}
},50)
btn.innerHTML="结束";
}else if(btn.innerHTML=="结束"){
clearInterval(time);
btn.innerHTML="开始抽奖";
}
}
</script>
</body>
</html>