jquery抽奖信息九宫格

<#include "/wap/include/_layout_head.html">
<@layout_head>
<title>幸运九宫格</title>

</@layout_head>
<#include "/wap/include/_layout_nav.html">


<style type="text/css">
        a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
            margin: 0;
            border: 0;
            padding: 0;
            font-style: normal;
            color: #323232;
            box-sizing: border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
        }
        html,body{
            background: #fff;
        }
        ul{
             320px; 
            margin:20px auto;
            text-decoration: none;
            list-style-type: none;
            padding-bottom: 1%;
        }
        ul:after{
            content: "";
            display: block;
             100%;
            height: 0;
            clear: both;
        }
        .video_list{
            margin:0 auto; 
            320px;
            height:294px;
            /* background:url('${ossPath!''}/upload/basActivity/12/wk.png') */
        }
        .video_list>li{
            float: left;
             95px;
            text-align: center; 
            padding-top: 91px;
            margin-left: 0px;
            margin-top: 0px;
            position: relative;
            /* border-radius: 5px; */
            
        }
        .video_list>li>div{
            position: absolute;
            left: 0;
            top: 0;
            95px; 
            height:91px;
            background:url('${ossPath!''}/upload/basActivity/12/jgg1.png');
        }
        .video_list>li>div>span{
            display: inline-block;   
            margin-top:30px;
            line-height:20px;
            80%;
        }
        #btnwrap{
             70%;
            margin:10px auto;
            text-align: center;

        }
        #btnwrap input{
             100%;
            height: 35px;
            margin-bottom: 10px;
            border-radius: 5px;
            border:1px solid orange;
            background-color: #fff;
        }
        #btnwrap input:hover{
            background-color: orange;
        }
     
     
    .login_div_shade {
        position: fixed;
         100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        background: rgba(0,0,0,0.8);
        display: none;
        z-index: 9999999;
    }
    .login_div.login {
        position: absolute;
         300px;
        height: 216px;
        overflow: hidden;
        top: 50%;
        margin-top: -174px;
        left: 50%; 
        margin-left:-150px;
        z-index: 99999;
        min-height: 216px;
        background:url('${ossPath!''}/upload/basActivity/12/award_text.png');
    }
.login {
     100%;
    min-height: 216px; 
   /*  background-size: cover; */
}
.login_div.login .box-login {
    margin: 0;
} 
.login .box-login {
     300px;
    position: relative;
   /*  border: solid 1px #aaaaaa; */
    float: right;
    margin-top: 160px;
    margin-right: 60px;
    /* background: #f6f6f6; */
}
.login_div.login .box-close {
    font-size: 44px;
    line-height: 44px;
} 
.login .box-login .ico-login {
     44px;
    height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    cursor: pointer;
}
.login .tab {
     283px;
    min-height: 320px;
    text-align: center;
    padding-top: 25px;
    margin: 0 auto;
} 
</style>
 
 <div style="background:#33CC99 url('${ossPath!''}/upload/basActivity/12/bg.jpg');">
     <img src="${ossPath!''}/upload/basActivity/12/bt.png"  width="320" style="margin:0 auto;" /> 
    <div style="clear:both;overflow:hidden;"></div>  
    <div style="320px; height:294px;margin:0 auto; background:url('${ossPath!''}/upload/basActivity/12/wk.png')">
        <ul class="video_list" style="padding-top:10px;padding-left:16px;">
            <li><div><span>灵山门票+净素自助餐</span></div></li>                    
            <li><div><span>拈花湾+电瓶车</span></div></li>                    
            <li><div><span>灵山精舍+灵山双人门票</span></div></li>                    
            <li><div><span>2017双园年卡</span></div></li>                    
            <li><div><span style="margin-top:20px;">2017拈花湾单园年卡（亲子 ）</span></div></li>                    
            <li><div><span>客栈</span></div></li>                    
            <li><div><span>灵山免票</span></div></li>                    
            <li><div><span>拈花湾免票</span></div></li>                    
            <li><div><span>客栈免费住宿一晚</span></div></li>                    
        </ul>
    </div>
    <div id="btnwrap" style="260px;margin:0 auto;margin-top:20px;">
        <div style="float:left;">
            <input type="button" id="btn1"  style="background: url('${ossPath!''}/upload/basActivity/12/start.png');120px;border:0;display:block"/>
            <input type="button" id="btn2"  style="background: url('${ossPath!''}/upload/basActivity/12/stop.png');120px;border:0;display:none;"/>
        </div>
        <div style="float:right;">
            <input type="button" id="btnaward"  style="background: url('${ossPath!''}/upload/basActivity/12/award.png');120px;border:0;"/>
        </div>
         
    </div>  
    <div style="clear:both;overflow:hidden;"></div>  
    <div style="margin:0 auto;margin-top:20px;320px;height:247px;background:url('${ossPath!''}/upload/basActivity/12/guize.png') ">  
    
    </div>
    <br/><br/> 

 </div>  


    
    
<div class="login_div_shade" >
<div class="login login_div">
    <div class="box-login">
        <div class="box-close ico-login" onclick="hideLoginDialog()" >
            <img src="${ossPath!''}/upload/basActivity/12/btn_03.png" style="margin-top:-8px;" />
        </div>
        <div class="tab tab-login" id="log" style="display: block;"> 
            <div style=" 100%;">
                 
                <div style="height:60px;">&nbsp;</div>
                <div style="color:#fff;">XXXXXXXXXXXXXXXXXXXXx</div> 
                 
                <div style="height:30px;">&nbsp;</div>
                <input type="button"   style="cursor:pointer; 120px;height:47px;background:url('${ossPath!''}/upload/basActivity/12/buy.png') " />
                    
                 
            </div>
        </div>
    </div>
</div>
</div>

<script>
window.onload = function(){
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oUl = document.querySelector(".video_list");
    var oLi = oUl.getElementsByTagName('li');
    //获取随机数
    function rands(n){
        var rands = Math.floor(Math.random()*n);
        return rands
        
    }
    //去重
    function checkArrIn(rand,array){
        if(array.indexOf(rand) > -1){
            return true
        }
        return false;
    }
    function fn(n,value) {
        var arr = [];
        var isNum = !isNaN(Number(n));//判断n是不是一个数字，包含字符串类型的数字
        // var isRandOk = (n >= min && n <= max && n <= (max - min)) ? true : false;//判断n的取值是否符合要求
        if (n) {
            for (var i = 0; i < n; i++) {
                var rand = rands(value);
                if (checkArrIn(rand, arr)) {
                    i--
                } else {
                    arr.push(rand)
                }
            }
        }
        return arr;
    }

    //获取随机的格子标签
    function randdiv(){
        var ran = fn(1,9);
        var arry = [];
        for (var i = 0; i < 1; i++){    
            arry.push(oLi[ran[i]].getElementsByTagName('div')[0])
        }
        return arry;
        
    }
    //获取随机颜色值：
    var timer;
    var nowBoxIndex = 0; 
    var prizeBoxIndex = 0
    oBtn1.onclick = function(){
        // console.log(randdiv())
        oBtn1.style.display = "none";
        oBtn2.style.display = "block";
        oBtn2.disabled="disabled";
        getPrizeIndex();//获取得奖项
        
        clearInterval(timer);
        timer = setInterval(function(){
            // 随机格子
            var box = randdiv();
           
            for (var i = 0; i < oLi.length; i++) {
                //oLi[i].getElementsByTagName('div')[0].style.background = "#fdb274";
                oLi[i].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jgg1.png')";
            }
            // console.log(color)
            for (var i = 0; i < 1; i++) {
                //var color = fn(3,255);
                  //box[i].style.background = "rgb("+color[0]+','+color[1]+','+color[2]+")";
                  box[i].style.background = "url('${ossPath!''}/upload/basActivity/12/jjg2.png')";
                  nowBoxIndex = i;
            }  
        },50); 
        
    }

    //ajax 获取得奖项目
    function getPrizeIndex(){
        prizeBoxIndex = 7; // 获奖的id
        oBtn2.disabled="";
        // ajax
    }

    oBtn2.onclick = function(){
        
        for (var i = 0; i < oLi.length; i++) { 
            oLi[i].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jgg4.png')";
        }
        oLi[prizeBoxIndex].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jjg2.png')";
        oLi[prizeBoxIndex].getElementsByTagName('div')[0].style.cursor="pointer";
        
        clearInterval(timer);
        
        oBtn1.style.display = "block";
        oBtn2.style.display = "none";
         
        showLoginDialog();
    }
}


$('.login_div .menu-login em').hover(function(){
    $(this).addClass('cur').siblings().removeClass('cur');
     var index=$('.login_div .menu-login em').index(this);
     $('.login_div .form-login').eq(index).show().siblings().hide();
});
function showLoginDialog(){  
    $('.login_div_shade').show();
}
function hideLoginDialog(){
    $('.login_div_shade').hide();
} 
</script>