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 class="wrap">       <div class="header"></div>       <div class="main">          <div class="con980">              <div 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 五彩连珠网页特效