• Js实现简易大转盘抽奖代码


     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>无标题文档</title>

    </head>


    <body>


    <table id="tb">

    <tr>

        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

    </tr>

    <tr>

        <td>16</td><td></td><td></td><td></td><td>6</td>

    </tr>

    <tr>

        <td>15</td><td></td><td></td><td></td><td>7</td>

    </tr>

    <tr>

        <td>14</td><td></td><td></td><td></td><td>8</td>

    </tr>

    <tr>

        <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>

    </tr>

    </table>

    <p></p>

    请输入1-16其中一位整数,代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="开始" onclick="StartGame()" />

        <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 tempX=0,

                 tempY=0,

                 direction="Along",

                 count=0;

                while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)

                {

                    count++;

                    resultArr.push([tempY,tempX]);

                    if(direction=="Along"){

                        if(tempX==n-1)

                            tempY++;

                        else

                            tempX++;

                        if(tempX==n-1&&tempY==m-1)

                            direction="Inverse"

                    }

                    else{

                        if(tempX==0)

                            tempY--;

                        else

                            tempX--;

                        if(tempX==0&&tempY==0)

                            break;

                    }

                }

                return resultArr;

            }

            

            var index=0,           //当前亮区位置

           prevIndex=0,          //前一位置

           Speed=300,           //初始速度

           Time,            //定义对象

           arr = GetSide(5,5),         //初始化数组

             EndIndex=0,           //决定在哪一格变慢

             tb = document.getElementByIdx_x("tb"),     //获取tb对象 

             cycle=0,           //转动圈数   

             EndCycle=0,           //计算圈数

            flag=false,           //结束转动标志 

            quick=0;           //加速

            

            

            function StartGame(){

             cycle=0;

             flag=false;

             EndIndex=Math.floor(Math.random()*16);

             //EndCycle=Math.floor(Math.random()*4);

            EndCycle=1;

             Time = setInterval(Star,Speed);

            }

            

            function Star(num){

                //跑马灯变速

                if(flag==false){

                  //走五格开始加速

                 if(quick==5){

                     clearInterval(Time);

                     Speed=50;

                     Time=setInterval(Star,Speed);

                 }

                 //跑N圈减速

                 if(cycle==EndCycle+1 && index==EndIndex){

                  clearInterval(Time);

                     Speed=300;

                     flag=true;         //触发结束

                     Time=setInterval(Star,Speed);

                 }

                }

                

                if(index>=arr.length){

                    index=0;

                    cycle++;

                }

                

               //结束转动并选中号码

             if(flag==true && index==parseInt(Trim(document.getElementByIdx_x("txtnum").value))-1){ 

              quick=0;

              clearInterval(Time);

                }

              

                tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red";

                if(index>0)

                    prevIndex=index-1;

                else{

                    prevIndex=arr.length-1;

                }

                tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";

                index++;

                quick++;

                

            }

           

        </script>

    </body>

    </html>


  • 相关阅读:
    spring整合websocket通信
    Log4j学习
    Elasticsearch学习之ES节点类型以及各种节点的分工
    Elasticsearch 学习之提升性能小贴士
    Python奇技淫巧
    汉语拼音转换工具(Python 版)
    根据数据库的表结构的类型返回其对应的简写类型
    python的动态加载机制??
    计算二进制中的字符串的长度
    一个erlang游戏服务端
  • 原文地址:https://www.cnblogs.com/crane13/p/3150128.html
Copyright © 2020-2023  润新知