js抽奖，跑马灯

分享自己写的跑马灯抽奖。

HTML代码 
<!--首先将一个div的背景设为一个圆形-->

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

    <div style=" 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>