<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大抽奖</title>
<style type="text/css">
table.hovertable{
font-family:微软雅黑;
font-size: 18px;
color: #333333;
border-width:1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable td{
border-width: 1px;
padding: 10px;
border-style:solid;
border-color: #a9c6c9;
}
.button{
font-size: 28px;
height: 70px;
line-height: 70px;
padding: 0 70px;
border-radius: 200px;
background-color: #7B72E9;
border-color: #7B72E9;
cursor: pointer;
border:none;
color: #FFF;
}
.select{
background:#229ffd;
color:white;
}
</style>
<script type="text/javascript">
var stuInterval=null;
function comm(){
//时间倒计时
time();
stuInterval=setInterval(function (){
var index=Math.floor(Math.random()*34+1);
var stuId="student_"+index;
var stuTd=document.getElementById(stuId);
var oldStu=document.getElementsByClassName("select");
if(oldStu.length != 0){
oldStu[0].setAttribute("class","");
}
if(stuTd){
stuTd.setAttribute("class","select");
var name=stuTd.innerText;
console.log(name);
document.getElementById("luckyStudent").innerText=name;
}
},200)
}
function time(){
var s=10;
var ts=setInterval(function (){
s--;
var tspan=document.getElementById("countDown");
tspan.innerText=s;
if(s==0){
clearInterval(ts);
setTimeout(function (){
clearInterval(stuInterval);
},5)
}
},1000)
}
</script>
</head
<body onload="lod()">
<table class="hovertable" id="studentTable">
<tr>
<td id="student_1">姓名</td>
<td id="student_2">姓名</td>
<td id="student_3">姓名</td>
<td id="student_4">姓名</td>
<td id="student_5">姓名</td>
<td id="student_6">姓名</td>
<td id="student_7">姓名</td>
<td id="student_8">姓名</td>
</tr>
<tr>
<td id="student_9">姓名</td>
<td id="student_10">姓名</td>
<td id="student_11">姓名</td>
<td id="student_12">姓名</td>
<td id="student_13">姓名</td>
<td id="student_14">姓名</td>
<td id="student_15">姓名</td>
<td id="student_16">姓名</td>
</tr>
<tr>
<td id="student_17">姓名</td>
<td id="student_18">姓名</td>
<td id="student_19">姓名</td>
<td id="student_20">姓名</td>
<td id="student_21">姓名</td>
<td id="student_22">姓名</td>
<td id="student_23">姓名</td>
<td id="student_24">姓名</td>
</tr>
<tr>
<td id="student_25">姓名</td>
<td id="student_26">姓名</td>
<td id="student_27">姓名</td>
<td id="student_28">姓名</td>
<td id="student_29">姓名</td>
<td id="student_30">姓名</td>
<td id="student_31">姓名</td>
<td id="student_32">姓名</td>
</tr>
<tr>
<td id="student_33">姓名</td>
<td id="student_34">姓名</td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
</tr>
</table>
<p>抽奖倒计时: <span id="countDown" style="font-size:70px;font-weight: bold;font-family: 微软雅黑;color: red">10</span>
<span style="font-weight: bold;font-family: 微软雅黑;color: red">S</span>
<span style="margin-left: 100px">幸运星: </span>
<span style="font-size: 70px;font-weight: bold;font-family:微软雅黑;color: red;" id="luckyStudent"></span>
</p><button class="button" stop="true" id="go" onclick="comm()">Come Baby</button>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
