2016年送毕业生晚会抽奖系统
一、相关知识点
1、HTML DOM setInterval() 方法
定义和用法：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval(code,millisec[,"lang"])
返回值：
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
2、HTML DOM clearInterval() 方法
定义和用法：
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：
clearInterval(id_of_setinterval)
3、JavaScript prototype 属性
定义和用法：
prototype 属性使您有能力向对象添加属性和方法。
语法：
object.prototype.name=value
4、JavaScript splice() 方法
定义和用法：
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法：
arrayObject.splice(index,howmany,item1,.....,itemX)
二、源代码
1.HTML代码
1 <!--title：湖北师范学院“2016·起航·同行”送毕业生晚会抽奖系统 2 author：湖北师范学院·计算机科学与技术学院 曾文莉 3 time:2016.3.14--> 4 <!DOCTYPE html> 5 <html> 6 <head lang="en"> 7 <meta charset="UTF-8"> 8 <title>2016送毕业生晚会抽奖系统</title> 9 <link rel="stylesheet" type="text/css" href="../mystyle/party.css"> 10 <script type="text/javascript"> 11 //声明全局变量 12 var timer; //作为setInterval()返回的ID值 13 var cellnum = 1; //代表表格的编号，从1开始 14 var ran; //存放随机下标 15 16 //设置修改按钮背景颜色 17 function change_color1(x) { 18 x.style.backgroundColor = '#ffffff'; 19 } 20 function change_color2(x) { 21 x.style.backgroundColor = 'burlywood'; 22 } 23 24 //将所有参与抽奖的号码存放在一个数组里 25 var arr = new Array(100); //新建一个数组 26 for(var i= 0;i<arr.length;i++) { //给数组赋值 27 if(i<10) arr[i] = '00' + (i + 1); 28 else if(i<99) arr[i] = '0' + (i + 1); 29 else arr[i] = i + 1; 30 } 31 // alert(arr[98]); 32 33 //获得随机数 34 function getRan() { 35 ran = Math.floor(Math.random()*(arr.length-1)); //获得随机下标 36 return arr[ran]; //返回随机下标对应的随机号码 37 } 38 // alert(getRan()); 39 40 //将获得的随机号码输入中奖号码显示区域 41 function getNum() { 42 document.getElementById("result").value = getRan(); 43 } 44 45 //在中奖号码显示区域动态获取随机号码 46 function setTimer() { //按下“抽奖开始”按钮，中奖号码显示区域将动态获取随机号码 47 timer = setInterval("getNum()", 10); 48 document.getElementById("start").disabled = true; //disabled为true时将“抽奖开始”按钮设置为不可用 49 document.getElementById("end").disabled = false; 50 } 51 function clearTimer() { 52 arr.splice(ran,1); //删除已抽中的号码 53 clearInterval(timer); //停止动态获取随机号码 54 document.getElementById("start").disabled = false; 55 document.getElementById("end").disabled = true; //disabled为true时将“抽奖结束”按钮设置为不可用 56 } 57 58 //将抽到的获奖号码写入表格 59 function setValues(){ 60 document.getElementById(cellnum).value = document.getElementById("result").value ; //将中奖号码显示区域的值写入id为cellnum的值的表格处 61 cellnum++; 62 if(cellnum>7) { 63 document.getElementById("result").value = "抽奖完毕！祝贺所有获奖的同学！" 64 document.getElementById("start").disabled = true; 65 } 66 } 67 </script> 68 </head> 69 <body> 70 <div id="header"> 71 <img src="../images/2.png" width="80%" height="20%"> 72 </div> 73 <!--抽奖结果所在地方--> 74 <div id="all_result"> 75 <h1><span>2016“起航·同行”送毕业生晚会</span>抽奖系统</h1> 76 <!--抽号结果显示区域--> 77 <div id="content"> 78 <h1>中奖号码</h1> 79 <center><input type="text" value="要开始抽奖啦，同学们准备好了吗？" id="result" readonly></center> <!--把输入字段设置为只读。--> 80 </div> 81 82 <center> 83 <input type="button" value="抽奖开始" id="start" readonly onmouseover="change_color1(this)" onmouseout="change_color2(this)" onclick="setTimer()"> 84 <input type="button" value="抽奖结束" id="end" readonly onmouseover="change_color1(this)" onmouseout="change_color2(this)" onclick="clearTimer();setValues();"> 85 </center> 86 87 <!--获奖名单显示区域--> 88 <div id="result_num"> 89 <table border="1"> 90 <tr> 91 <td>一等奖</td> 92 <td colspan="2">二等奖</td> 93 <td colspan="4">三等奖</td> 94 </tr> 95 <tr> 96 <td><input id="7" readonly></td> 97 <td><input id="5" readonly></td> 98 <td><input id="6" readonly></td> 99 <td><input id="1" readonly></td> 100 <td><input id="2" readonly></td> 101 <td><input id="3" readonly></td> 102 <td><input id="4" readonly></td> 103 </tr> 104 </table> 105 </div> 106 </div> 107 </body> 108 </html>
2.CSS代码
1 body{ 2 margin: 0px; 3 padding: 0px; 4 background-color: #ffffff; 5 } 6 /*设置标题字体*/ 7 h1{ 8 text-align: center; 9 font-size: 40px; 10 /*color:red;*/ 11 12 } 13 span{ 14 font-size: 52px; 15 } 16 17 /*设置抽号结果显示区域*/ 18 #result{ 19 width: 50%; 20 height: 100px; 21 background-color: #aaac90; 22 text-align: center; 23 font-size: 30px; 24 color: firebrick; 25 } 26 27 /*设置抽奖按钮样式*/ 28 #start,#end{ 29 width:6%; 30 height: 40px; 31 margin: 10px; 32 background-color: burlywood; 33 } 34 /*设置获奖名单所在表格*/ 35 td{ 36 height: 50px; 37 } 38 table{ 39 /*height: 60px;*/ 40 width:80%; 41 text-align: center; 42 font-size: 28px; 43 margin: 50px auto; 44 } 45 table input { 46 height: 50px; 47 width: 100%; 48 text-align: center; 49 background-color: #ffffff; 50 color:darkslateblue; 51 font-size: 24px; 52 }
三、显示效果
1、运行之前
2、
3、
