js抽獎，跑馬燈

分享自己寫的跑馬燈抽獎。

HTML代碼 
<!--首先將一個div的背景設為一個圓形-->

    <div style=" width:240px; height:232px;   background-image:url(Roundel.png);">
    <!--再在中間放一個div用margin搞到中間去-->

    <div style=" width:210px; height:210px; margin:15px 11px 15px 11px;">  
        <!--  再在div里放table充滿 -->
            <!--HTML代碼，就是建立一個table設成這個樣子，給存放獎品的td加一下統一的name-->

      <table id="tbroundel">
<tr>
    <td name="roundelgoods" id="turn1" >1</td><td name="roundelgoods" id="turn2" >2</td><td name="roundelgoods" id="turn3" >3</td>
</tr>

<tr>
    <td name="roundelgoods" id="turn8" >8</td><td id="RunDraw"><input id="btnrun" type="button" value="開始" onclick="startup()" /></td><td name="roundelgoods" id="turn4" >4</td>
</tr>
<tr>
    <td name="roundelgoods" id="turn7" >7</td><td name="roundelgoods" id="turn6"  >6</td><td name="roundelgoods" id="turn5" >5</td>
</tr>
</table>
</div>

    </div>

 

效果

 

css

    <style type="text/css">
        #tbroundel
        {
        width:210px;
        height:210px;
        
            }
    #tbroundel td
    {
        width:70px;
        height:70px;
        text-align:center;

        
        }
        #RunDraw
        {
         padding:0;
            text-align:center;
            }
        #RunDraw input
       {
           width:100%;
           height:100%;
           margin:0;
           background-color:Red;
           }
    
    </style>

 

js算法

    <script type="text/javascript">

        var t; ///用它存放setinterval,不用扣得太細，因為只要用到setinterval最后就得用     window.clearInterval(t);去釋放他
        var index = 1;/////這個用來記錄當前循環的次數，比如點了抽獎要轉四圈，每轉一圈有8個獎品，那一共就要循環8*圈數
        var circles = 1;////抽獎要轉的圈數
        var currentcircles = 1; ///記錄當前是第幾圈setinterval的第二個參數，通過操縱他來實現變速
        var speed = 0;/////轉動的速度,用它作為
        var endpoint = 0; /////最后停止的位置，即選中了誰
        ////抽獎開始
        function startup() {
        ///點一次抽獎過程中按鈕禁用
            document.getElementById("btnrun").disabled = true;

        /////隨機生成圈數，要跑幾圈，不要太少了，太少了看着就不舒服。這里是生成4-14以內的隨機整數
            circles = Math.round(Math.random() * 10 + 3);
            /////終結點，生成1-8之內的隨機數,因為你一圈有8個獎品
            endpoint = Math.round(Math.random() * 8);
  

            ////當前的圈數
            currentcircles = 1;
            ////速度，誰的太高了會很慢
            speed = 700;
            ////當前循環的次數
            index =1;
     /////取得放獎品的<td>的數組
            var goods = document.getElementsByName("roundelgoods");
            ////存放獎品的<td>的數組
            var drawturn = [];
            ////遍歷加入到drawturn數組里
            for (var i = 0; i <(8); i++) {
                // document.getElementById("turn" + (i + 1)).style.border = "0";
                ////加入時把他們的樣式置為初始樣式
                document.getElementById("turn" + (i + 1)).style.fontSize = "large";
                document.getElementById("turn" + (i + 1)).style.color = "black";
                ///push方法，向數組內追加一個元素
            drawturn.push(document.getElementById("turn"+(i+1)));
        }
 
  
  ////開始循環
       t= setInterval(HighTurn,speed);
   }

   ///循環獎品方法
    function HighTurn() {


    /////如果當前循環次數大於1，則當前循環說明不是1號獎品，那就得吧這個獎品的前一個兄弟的樣式設為初始值
        if (index > 1) {
        /////當然如果這時候index除以8余數為1的話說明這時至少循環完一圈且剛好又循環到1號獎品了，這就不能用(數組下標-1）的方法去清除樣式了，因為他的前一位是上一次循環的8號獎品
            if ((index % 8) == 1) {
              //  document.getElementById("turn8").style.border = "0
                document.getElementById("turn8").style.fontSize = " large";
                document.getElementById("turn8").style.color = "black";
            }
            ////如果不是的話就好說了，直接(數組下標-1)清除樣式 
            else {
                //document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.border = "0";
                document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.fontSize = " large";
                document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.color = "black";
              //  document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.border = "3px solid #ccc";
            }
         }
         ////處理完前一個商品的樣式后再來改變當前獎品的樣式——大號字體，紅色
        document.getElementById("turn" + (index - (8 * (currentcircles - 1)))).style.fontSize = " xx-large";
        document.getElementById("turn" + (index - (8 * (currentcircles - 1)))).style.color = "red";

       ///完事之后判讀現在的循環次數除以8的余數是否為0，如果為零則說明一次循環已經到了最后一個獎品，接下來要進入下一圈了（不需要考慮第一次循環的，因為index的初始值是1,1/8不為0）
        if ((index % 8) == 0) {
       // 進入下一圈就得當前圈數+1
            currentcircles++;
        }
        ///然后循環次數+1，不要把它放到圈數加1的前面去
        index++;
        ///這里用來改變速度，在下設定的規則是在第一圈是每經過一個獎品則速度+80，setInterval的第二個參數是多長時間執行一次的意思，所以值越小，執行的頻率越高
        if (currentcircles == 1) {
            ///注意了，我就是因為沒寫這句話被悶了好半天，不寫他的話你的程序會一直在跑setInterval釋放不了。因為改變了setInterval的參數要讓他生效的話就得重新執行(我也不懂，但是試了一下這樣好使)。所以先把之前的清一下
            window.clearInterval(t);
             ///改變速度
            speed -= 80;
             ///在重新執行
             t = setInterval(HighTurn, speed);
         }
         ///在下設定的在最后一圈的時候開始減速
         else if (currentcircles == circles ) {
             window.clearInterval(t);
             speed += 80;
             t = setInterval(HighTurn, speed);
         }


         ////用來判斷是否循環完了，如果當前圈數==要循環的圈數，且當前循環到的獎品編號==終結點則判定為循環結束，最終會停在終結點位置的獎品上
         if (circles == currentcircles && ((index - 1) % 8) == endpoint) {
             ///清除setInterval
             window.clearInterval(t);
             ///回復按鈕使用
             document.getElementById("btnrun").disabled = false;
             alert("恭喜抽中了" + endpoint + "號獎品");
             return;
         }
 
       
    }

    </script>