js随机抽奖

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js抽奖</title>
<style type="text/css">
    *{ margin: 0; padding: 0; font-size:12px;}
    body{ background-color: #2C1914;font-family:"宋体"; }
    a img, ul, li { list-style: none; }
    a{text-decoration:none; outline:none; font-size:12px;}
    input, textarea, select, button { font-size: 100%;}
    .abs{ position:absolute;}
    .rel{ position:relative;}
    .wrap{ min-height:1000px;}
    .main{ height:718px; }
    .con980{ width:980px; margin:0 auto;}
    .header{ width:100%; height:50px;} 
    .play{ background:url(images/fl01.jpg) no-repeat; width:980px; height:625px; padding:22px 0 0 21px;}
    td{width:187px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:50px; }
    .playcurr{ background-color:#F60;}
    .playnormal{ background-color:#666;}
    .play_btn{ width:184px; height:115px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑";  font-size:40px;}
    .play_btn:hover{ background-position:0 -115px;}
    .btn_arr{ left:211px; top:138px;}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="wrap">
       <div class="header"></div>
       <div class="main">
          <div class="con980">
              <div class="play rel">
                 <p class="btn_arr abs"><input value="点击抽奖" id="btn" type="button" onClick="StartGame()"  class="play_btn" ></p>
                <table class="playtab" id="tb" cellpadding="0" cellspacing="1">
                    <tr>
                        <td>100万</td><td>200万</td><td>300万</td>
                    </tr>
                    <tr>
                        <td>800万</td><td></td><td>400万</td>
                    </tr>
                    <tr>
                        <td>700万</td><td>600万</td><td>500万</td>
                    </tr>
                </table>
            </div>
        </div>
     </div>
</div>


<script type="text/javascript">
/*清除空格*/
function Trim(str){
    return str.replace(/(^\s*)|(\s*$)/g, ""); 
    }

/*创建数组*/
function GetSide(m,n){
    //初始化数组
    var arr = [];
    for(var i=0;i<m;i++){
                arr.push([]);
                for(var j=0;j<n;j++){
                                        arr[i][j]=i*n+j;
                                        }
                            }
    //获取数组最外圈，其实就是表格的最外圈坐标
    var resultArr=[];
    var X=0,
    Y=0,
    direction="Along"
    while(X>=0 && X<m && Y>=0 && Y<n)
    {
    resultArr.push([X,Y]);
            if(direction=="Along"){
                                        if(Y==n-1)
                                                {X++;}
                                        else
                                        {Y++;}
                                        if(X==m-1&&Y==n-1)
                                        direction="Inverse"
                                        }
        else{
                    if(Y==0)
                    X--;
                    else
                    Y--;
                    if(X==0&&Y==0)
                    break;
                    }
    }
    return resultArr;
} //得到新的数组arr


    var index=0,           //当前亮区位置
    prevIndex=0,          //前一位置
    Speed=300,           //初始速度
    Time,            //定义对象
    arr = GetSide(3,3),         //初始化数组(横列，竖列)
    tb = document.getElementById("tb"),     //获取表格对象 
    cycle=0,           //转动圈数   
    flag=false,           //结束转动标志 
    quick=0;           //加速



function StartGame(){
    $("td").removeClass("playcurr");
    document.getElementById("btn").disabled=true;//
    clearInterval(Time); //停止循环执行Stat函数
    cycle=0;//默认转动圈数为0
    flag=false;//默认不转动
    Time = setInterval(Star,Speed);//循环执行Star

}

function Star(num){
    //跑马灯变速
    if(flag==false){
                    
                    //走五格开始加速
                    if(quick==5){
                        clearInterval(Time);
                        Speed=50;
                        Time=setInterval(Star,Speed);
                    }
                    //跑N圈减速
                    if(cycle>=4){
                        clearInterval(Time);
                        Speed=300;
                        flag=true;       //触发结束             
                        Time=setInterval(Star,Speed);
                    }
                }
                
            

    if(index>=arr.length){
        index=0;
        cycle++;
    }




    tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr";//给表格外圈加样式
        if(index>0)
            prevIndex=index-1;
        else{
            prevIndex=arr.length-1;
        }
    tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal";//给表格外圈加样式
    index++;
    quick++;
    
    //结束转动并选中号码
    //trim里改成数字为最终停止的地方（可以自己建一个数组，让数字从数组里面取值，这样可以随机，也可以设置概率）
    if(flag==true&&cycle>=5&& index==parseInt(Trim('1'))){ 
                quick=0;
                clearInterval(Time);
                index=0;
                document.getElementById("btn").disabled=false;
            }

}

</script>
</body>
</html>
猜你喜欢
