JS抽獎程序代碼，轉盤抽獎

2024-09-05 12:21:03

字體：大中小

來源：轉載

供稿：網友

JS抽獎程序代碼，轉盤抽獎，從網上找的代碼，又經過了幾次修正，加入了緩沖停止，慢慢加速等功能，可以說越來越完美了，想用的朋友就復制代碼吧，你也可以當作學習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><title>js抽獎</title><style type="text/css">*{ margin: 0; padding: 0; font-size:12px;}body{ background-color: #2C1914;font-family:"宋體"; }a img, ul, li { list-style: none; }a{text-decoration:none; outline:none; font-size:12px;}input, textarea, select, button { font-size: 100%;}.abs{ position:absolute;}.rel{ position:relative;}.wrap{ min-height:1000px;}.main{ height:718px; }.con980{ width:980px; margin:0 auto;}.header{ width:100%; height:50px;} .play{ background:url() no-repeat; width:980px; height:625px; padding:22px 0 0 21px;}td{width:187px; height:115px; font-family:"微軟雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px; }	.playcurr{ background-color:#F60;}	.playnormal{ background-color:#666;}	.play_btn{ width:480px; height:115px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微軟雅黑";  font-size:40px;}	.play_btn:hover{ background-position:0 -115px;}	.btn_arr{ left:255px; top:255px;}    </style></head><body><div   id="aikwasq"   class="wrap">       <div   id="aysqgki"   class="header"></div>       <div   id="ussmeew"   class="main">          <div   id="qmykwec"   class="con980">              <div   id="qycwowe"   class="play rel">                 <p class="btn_arr abs"><input value="點擊領獎" id="btn1" type="button" onclick="StartGame()" class="play_btn" ></p><table class="playtab" id="tb" cellpadding="0" cellspacing="1"><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>            </div>        </div>     </div></div>    <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.getElementById("tb"),     //獲取tb對象          cycle=0,           //轉動圈數            EndCycle=0,           //計算圈數        flag=false,           //結束轉動標志         quick=0;           //加速        btn = document.getElementById("btn1")                function StartGame(){	     clearInterval(Time);         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==parseInt(EndIndex)){                 clearInterval(Time);                 Speed=300;                 flag=true;       //觸發結束			                  Time=setInterval(Star,Speed);             }            }                        if(index>=arr.length){                index=0;                cycle++;            }                       //結束轉動并選中號碼		   //trim里改成數字就可以減速，變成Endindex的話就沒有減速效果了         if(flag==true && index==parseInt(Trim('5'))-1){           quick=0;          clearInterval(Time);            }            tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr";            if(index>0)                prevIndex=index-1;            else{                prevIndex=arr.length-1;            }            tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal";            index++;            quick++;                    }              </script></body></html>

上一篇：網頁游戲代碼:經典俄羅斯方塊

下一篇：HTML5 Javascript 五彩連珠網頁特效