js一个抽奖的例子

朋友公司开年会，帮忙写了个抽奖的demo，源码如下,github中有程序：

html:

 1 <header>
 2         lottery demo
 3     </header>
 4     <div class="main">
 5         <ul>
 6             <li><img src="photos/name_s.jpg" alt="童年照" class="little_pic"></li>
 7             <li><img src="1.jpg" alt="真相照" class="truth_pic"></li>
 8         </ul>
 9         <input type="button" value="开始" class="lottery">
10         <select class="prize">
11             <option value="1">一等奖</option>
12             <option value="2">二等奖</option>
13             <option value="3">三等奖</option>
14         </select>
15         <input type="button" value="真相" class="truth">
16     </div>
17     <footer>
18         <span class="prize_num"></span>
19     </footer>

css:

 1 body{
 2             margin:0;
 3             padding: 0;
 4             background-color: #4F81BC;
 5             color: #fff;
 6             text-align: center;
 7         }
 8         ul{
 9             list-style-type: none;
10         }
11         header{
12             width: 500px;
13             margin: 100px auto 0 auto;
14             font-size: 24px;              /* 显示“lottery demo”字体大小 */
15             /* border:1px solid #000; */
16         }
17         ul{
18             width: 800px;                 /* 两张图片共占的宽度 */
19             height: 400px;                    /* 显示图片的高度 */            
20             margin:50px auto;
21             overflow: hidden;
22         }
23         li{
24             width: 50%;
25             float: left;
26             height: 100%;
27         }
28         img{
29             width: 100%;
30             height: 100%;
31         }
32         footer{
33             margin-top: 50px;
34             font-size: 24px;             /* 显示“*等奖”字体大小 */
35         }

js:

 1 /* 20150609 */
 2 var lottery = document.getElementsByClassName('lottery')[0];
 3 var truth = document.getElementsByClassName('truth')[0];
 4 var littlePic = document.getElementsByClassName('little_pic')[0];
 5 var truthPic = document.getElementsByClassName('truth_pic')[0];
 6 var prize = document.getElementsByClassName('prize')[0];
 7 var prizeNum = document.getElementsByClassName('prize_num')[0];
 8 var flag = 0;
 9 var num = 0;
10 var timer;
11 var t_pic;
12 
13 function Game(){
14     this.namesArr=["name_查","name_萍","name_s"];    /*童年照片名*/
15     this.truthsArr=["p1","p2","p3"];                /*成年照片名，与上面的顺序对应*/
16 };
17 
18 Game.prototype.init = function(){
19     lottery.value = "开始";
20     prizeNum.innerHTML = "一等奖";
21 };
22 
23 Game.prototype.start = function(){
24     var names = this.namesArr;
25     var truths = this.truthsArr;
26     prize.addEventListener("change",function(evt){
27         var index = prize.selectedIndex;
28         getPrize(index);
29     },false);
30     
31     lottery.addEventListener("click",function(evt){
32         if(flag===0){
33             lottery.value = "停止";
34             flag=1;
35             truthPic.src = "1.jpg";
36             getPicName(names,truths);
37         }else{
38             lottery.value = "开始";
39             flag=0;
40             stopPic(names,truths);
41         }
42     },false);
43 
44     truth.addEventListener("click",function(evt){
45         truthPic.src = t_pic;
46     },false);
47 };
48 
49 function getPicName(names,truths){
50     num = 0;
51     timer = setInterval(function(){
52         num++;
53         if(num===names.length){
54             num = 0;
55         }
56         littlePic.src = "photos/"+ names[num] +".jpg";
57         t_pic = "photos/"+ truths[num] +".jpg";
58     },100);
59 }
60 
61 function stopPic(names,truths){
62     clearInterval(timer);
63     if(names.length>=2){
64         names.splice(num,1);
65         truths.splice(num,1);
66     }else{
67         alert("Game over!");
68     }
69 }
70 
71 function getPrize(index){
72     prizeNum.innerHTML = prize.options[index].text;
73 }
74 
75 function play(){
76     var game = new Game();
77     game.init();
78     game.start();
79 }
80 
81 play();

可下载源码查看效果。