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

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

     可下载源码查看效果。