先看下效果：
由於寫javascript和jquery的代碼不多，加之活動時間要求比較緊，就在網絡上尋找了下相關效果，大概是這樣的：
引用自：www.cnblogs.com/caism/archive/2011/10/12/2208738.html
效果：http://www.csrcode.cn/html/txdm/qtdm/3876.htm
<!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"> td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle} </style> </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.getElementById("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.getElementById("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++; } /* window.onload=function(){ Time = setInterval(Star,Speed); } */ </script> </body> </html>
由於上面的代碼是前端控制中獎獎項，我通過ajax從后端獲取獎項並記錄數據。於是改了下js代碼。雖然簡單，寫點代碼備注下：
<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(3,4), //初始化數組
EndIndex=0, //決定在哪一格變慢
tb = document.getElementById("tb"), //獲取tb對象
cycle=0, //轉動圈數
EndCycle=0, //計算圈數
flag=false, //結束轉動標志
quick=0; //加速
btn = document.getElementById("btn1")
hit_info; //中獎名稱
function StartGame(){
clearInterval(Time);
cycle=0;
flag=false;
//EndCycle=2;
EndCycle=Math.floor(Math.random()*2+2);
$.ajax({
url:'index.php?act=huodong_2015yurenjie&op=getdata&lottery_id=1',
type:'post',
//data:'hash="<?php echo $output['hash'];?>"&sid=<?php echo session_id();?>',
data:{
'hash' : '<?php echo $output['hash'];?>',
'sid' : '<?php echo session_id();?>'
},
// cache:false,
dataType:'json',
async : false, //默認為true 異步
error:function(){
alert('獲取失敗，請稍后重試');
},
success:function(data){
//alert(data);
if(data['error']==1){
alert(data['message']);
}else{
info=data['data'];
EndIndex=info['hit_pos'];
hit_info=info['hit_info'];
Time = setInterval(Star,Speed);
}
}
});
// alert(EndIndex);
}
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)){
//alert(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){
if(flag==true && index==EndIndex-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++;
if(flag==true && index==EndIndex){
var parent=document.getElementById("hit_list");
var childNode=document.createElement('li');
childNode.innerHTML=<?php echo $_SESSION['member_mobile']?>+" "+hit_info['prize_name'];
parent.insertBefore(childNode,parent.childNodes[0]);
alert("恭喜你獲得第"+EndIndex+"號獎品:"+hit_info['prize_name']);
}
}
</script>