zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    设置github使用的SSH key
    Github的两种协议SSH和HTTPS
    OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
    OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
    APP路由还能这样玩
    APP路由还能这样玩
    APP路由还能这样玩
    APP路由还能这样玩
    掘金技术社区沸点指南(试行版)
    掘金技术社区沸点指南(试行版)
  • 原文地址:https://www.cnblogs.com/MLGB/p/3767917.html
Copyright © 2011-2022 走看看