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>


posted @ 2013-05-31 13:03  crane13  阅读(1177)  评论(0编辑  收藏  举报