你的位置:首页 > Java教程

[Java教程]项目:2016年送毕业生晚会抽奖系统

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、