原生js实现抽奖

公司栏目需要增加老-虎-机抽奖，所以匆忙弄了一个，大家可以试试。

这个程序为了安全，是通过服务端算好结果，前端展示效果，大家可以用来娱乐下

<script type="text/javascript" src="../Public/js/common.min.js?v=201207181003"></script>
<script type="text/javascript">
var CONFIG = new Object();
CONFIG['uid'] = '385';
CONFIG['username'] = '签名很帅签名很帅';
CONFIG['avatar'] = 'http://192.168.0.171:8085/Gsails/StorageServer/images/yuetaojie/avatar/001/250/160/385/avatar.jpg';
</script>
    <style>
        #show{position:relative;background: url(../Public/images/game/game_bg1.png);width: 263px;height: 109px;padding-top: 77px;padding-left: 37px}
        .rocker{position:absolute;top:40px;right: 25px;width: 29px;height: 112px;background: url(../Public/images/game/rocker.png);cursor: pointer}
        #d1,#d2,#d3{width: 54px;height:48px;margin-top:11px;overflow: hidden;position: relative;float: left;}
        #d2{margin-left: 11px}
        #d3{left: 11px}
        #show img{position: absolute;left:0}
    </style>
<div class="n j-htmlCode">
  <div id="show">
    <div id="d1">

    </div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div class="rocker"></div>
  </div>
</div>

<script type="text/javascript">
var win = true;
function crol(obj,n) {
    var mt,
    d = [1, 2, 5, 10],
    lt = 0,
    s,
    ram = Math.floor(Math.random() * 6);
    mt = setInterval(function() {
        lt++;
        if (lt < 100 + ram * 18) {
            s = d[3];
        };
        if (lt >= 100 + ram * 18 && lt < 150 + ram * 23) {
            s = d[2];
        };
        if (lt >= 150 + ram * 23 && lt < 250 + ram * 30) {
            s = d[1];
        };
        if (lt >= 250 + ram * 8) {
            s = d[0];
        };
        for (i = 0; i < 8; i++) {
            var el = obj[i];
            if(win && s == 2){  
                logs("success")
                clearTimeout(mt);                    
                if(i==2){
                    fen.f1++;
                    var m = i;
                    fen.f2.push(m);
                    s = parseInt(el.style.top+6);                
                    el.style.top = 0 + 'px';  
                    if (fen.f1 == 3) {                  
                        window.setTimeout(function() {
                             fen.f3();
                        },500);
                    }
                }                
            }else{
                var t = parseInt(el.style.top) - s;
                el.style.top = t + 'px';
            }            
            if (t <= -48) {       
               if (s == 1) {
                    el.style.top = 0 + 'px'; 
                    fen.f1++;   
                    clearTimeout(mt);
                    if(fen.f1 == 3){
                       window.setTimeout(function() {
                         fen.f3();
                        },500); 
                    }                    
                };
                el.style.top = 336 + 'px';
            }
        }
    },
    20);
}
var stampImg = [0,48,96,144,192,240,288,384,432];
var appendImg = function(obj){
    var imgStr ="";
    for(var i=0;i<8;i++){
        imgStr +="<img class='i"+i+"' src='../Public/images/game/"+(i+1)+".png' style='top:"+stampImg[i]+"px' />";
    }
    obj.innerHTML = imgStr;
}
var fen = {
    f1: 0,
    f2: [],
    f3: function() {   
       if (fen.f2.length>0) {
            var o=0;
            for (var i = 0; i < fen.f2.length; i++) {
                o++;
            };
            if (o == 3) {
                alert("恭喜恭喜");
            }   
        } else {
            alert("谢谢参与！");
        }
        fen.f1 = [];
    }
}
var startGame=function(){
    var img1 = Y.getTagName(Y.$id("d1"),"img");
    var img2 = Y.getTagName(Y.$id("d2"),"img");
    var img3 = Y.getTagName(Y.$id("d3"),"img");
    crol(img1,0);
    setTimeout(function() {
        crol(img2,1);
    },
    50);
    setTimeout(function() {
        crol(img3,2);
    },
    100)
}
Dom.Ready(function(){
    appendImg(Y.$id("d1"));
    appendImg(Y.$id("d2"));
    appendImg(Y.$id("d3"));
    Y.$(".rocker")[0].onclick = function(){
        startGame();
    }
});
</script>