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

     可下载源码查看效果。