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();

可下载源码查看效果。