js 随机大抽奖

最新推荐文章于 2019-08-18 17:00:01 发布

滴...滴滴

最新推荐文章于 2019-08-18 17:00:01 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/Tan_tan_666/article/details/84822364

版权

<!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>

滴...滴滴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 随机大抽奖

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;大抽奖&lt;/title&gt; &lt;style type="text/css"&gt; table.hovertable{ font-family:微软雅黑
复制链接

扫一扫