js一个抽奖的例子

<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>

body{
margin:0;
padding: 0;
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;             /* 显示“*等奖”字体大小 */
}

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