js一个抽奖的例子

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

html:

 <header>
         lottery demo
     </header>
     <div class="main">
         <ul>
             <li><img src="photos/name_s.jpg" alt="童年照" class="little_pic"></li>
             <li><img src="1.jpg" alt="真相照" class="truth_pic"></li>
         </ul>
         <input type="button" value="开始" class="lottery">
         <select class="prize">
             <option value="1">一等奖</option>
             <option value="2">二等奖</option>
             <option value="3">三等奖</option>
         </select>
         <input type="button" value="真相" class="truth">
     </div>
     <footer>
         <span class="prize_num"></span>
     </footer>

css:

 body{
             margin:;
             padding:;
             background-color: #4F81BC;
             color: #fff;
             text-align: center;
         }
         ul{
             list-style-type: none;
         }
         header{
             width: 500px;
             margin: 100px auto 0 auto;
             font-size: 24px;              /* 显示“lottery demo”字体大小 */
             /* border:1px solid #000; */
         }
         ul{
             width: 800px;                 /* 两张图片共占的宽度 */
             height: 400px;                    /* 显示图片的高度 */
             margin:50px auto;
             overflow: hidden;
         }
         li{
             width: 50%;
             float: left;
             height: 100%;
         }
         img{
             width: 100%;
             height: 100%;
         }
         footer{
             margin-top: 50px;
             font-size: 24px;             /* 显示“*等奖”字体大小 */
         }

js:

 /* 20150609 */
 var lottery = document.getElementsByClassName('lottery')[0];
 var truth = document.getElementsByClassName('truth')[0];
 var littlePic = document.getElementsByClassName('little_pic')[0];
 var truthPic = document.getElementsByClassName('truth_pic')[0];
 var prize = document.getElementsByClassName('prize')[0];
 var prizeNum = document.getElementsByClassName('prize_num')[0];
 var flag = 0;
 var num = 0;
 var timer;
 var t_pic;

 function Game(){
     this.namesArr=["name_查","name_萍","name_s"];    /*童年照片名*/
     this.truthsArr=["p1","p2","p3"];                /*成年照片名，与上面的顺序对应*/
 };

 Game.prototype.init = function(){
     lottery.value = "开始";
     prizeNum.innerHTML = "一等奖";
 };

 Game.prototype.start = function(){
     var names = this.namesArr;
     var truths = this.truthsArr;
     prize.addEventListener("change",function(evt){
         var index = prize.selectedIndex;
         getPrize(index);
     },false);

     lottery.addEventListener("click",function(evt){
         if(flag===0){
             lottery.value = "停止";
             flag=1;
             truthPic.src = "1.jpg";
             getPicName(names,truths);
         }else{
             lottery.value = "开始";
             flag=0;
             stopPic(names,truths);
         }
     },false);

     truth.addEventListener("click",function(evt){
         truthPic.src = t_pic;
     },false);
 };

 function getPicName(names,truths){
     num = 0;
     timer = setInterval(function(){
         num++;
         if(num===names.length){
             num = 0;
         }
         littlePic.src = "photos/"+ names[num] +".jpg";
         t_pic = "photos/"+ truths[num] +".jpg";
     },100);
 }

 function stopPic(names,truths){
     clearInterval(timer);
     if(names.length>=2){
         names.splice(num,1);
         truths.splice(num,1);
     }else{
         alert("Game over!");
     }
 }

 function getPrize(index){
     prizeNum.innerHTML = prize.options[index].text;
 }

 function play(){
     var game = new Game();
     game.init();
     game.start();
 }

 play();

可下载源码查看效果。