项目: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、运行之前

项目:2016年送毕业生晚会抽奖系统_第1张图片

2、

项目:2016年送毕业生晚会抽奖系统_第2张图片

3、

你可能感兴趣的:(项目:2016年送毕业生晚会抽奖系统)