抽奖，跑马灯

2019独角兽企业重金招聘Python工程师标准>>>

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

    
    

      
        
            

      
     1 2 3
     8  4
     7  6 5

 

效果

 

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;
           }
    
    

 

js算法

            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;     /取得放奖品的的数组
            var goods = document.getElementsByName("roundelgoods");            存放奖品的的数组
            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;
         }
 
       
    }    

转载于:https://my.oschina.net/yonghan/blog/513710