js製做抽獎及其原理(附代碼)

時間 2019-11-12

原文原文鏈接

以前給公司作過一個抽獎轉盤，要求可控制客戶抽中的獎品，開始在網上找了一段代碼，發現有缺陷，連續點擊按鈕會致使不停的轉，並且單次點擊有時候也不停下來，就在原有的基礎上作了一些修改，後端那邊說挺好用的，就拿出來分享一下：javascript

 <!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:80px; }
    .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://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.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>1</td><td>2</td><td>3</td>
                    </tr>
                    <tr>
                        <td>8</td><td></td><td>4</td>
                    </tr>
                    <tr>
                        <td>7</td><td>6</td><td>5</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('4'))){ 
                quick=0;
                clearInterval(Time);
                index=0;
                document.getElementById("btn").disabled=false;
            }

}

</script>




</body>
</html>

原理很簡單，html部分你們都會寫了，就是用表格排個樣子，固然也能夠用<li>來排css

Js部分，首先是建立數組，最後可獲得一個數組，數組內容爲表格最外圈的座標的集合，而後根據數組與表格外圈相對應，給最外圈的表格加非選中與選中的樣式，而後循環執行，最後根據轉動的圈數讓函數中止執行

//結束轉動並選中號碼
    //trim裏改爲數字爲最終中止的地方（能夠本身建一個數組，讓數字從數組裏面取值，這樣能夠隨機，也能夠設置機率）
    if(flag==true&&cycle>=5&& index==parseInt(Trim('4'))){
                quick=0;
                clearInterval(Time);
                index=0;
                document.getElementById("btn").disabled=false;
            }
html