之前给公司做过一个抽奖转盘，要求可控制客户抽中的奖品，开始在网上找了一段代码，发现有缺陷，连续点击按钮会导致不停的转，而且单次点击有时候也不停下来，就在原有的基础上做了一些修改，后端那边说挺好用的，就拿出来分享一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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(images/fl01.jpg) 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:184px; 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:211px; top:138px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </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="btn" 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> </tr> <tr> <td>8</td><td></td><td>4</td> </tr> <tr> <td>7</td><td>6</td><td>5</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 X=0, Y=0, direction="Along" while(X>=0 && X<m && Y>=0 && Y<n) { resultArr.push([X,Y]); if(direction=="Along"){ if(Y==n-1) {X++;} else {Y++;} if(X==m-1&&Y==n-1) direction="Inverse" } else{ if(Y==0) X--; else Y--; if(X==0&&Y==0) break; } } return resultArr; } //得到新的数组arr var index=0, //当前亮区位置 prevIndex=0, //前一位置 Speed=300, //初始速度 Time, //定义对象 arr = GetSide(3,3), //初始化数组(横列，竖列) tb = document.getElementById("tb"), //获取表格对象 cycle=0, //转动圈数 flag=false, //结束转动标志 quick=0; //加速 function StartGame(){ $("td").removeClass("playcurr"); document.getElementById("btn").disabled=true;// clearInterval(Time); //停止循环执行Stat函数 cycle=0;//默认转动圈数为0 flag=false;//默认不转动 Time = setInterval(Star,Speed);//循环执行Star } function Star(num){ //跑马灯变速 if(flag==false){ //走五格开始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈减速 if(cycle>=4){ clearInterval(Time); Speed=300; flag=true; //触发结束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } 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++; //结束转动并选中号码 //trim里改成数字为最终停止的地方（可以自己建一个数组，让数字从数组里面取值，这样可以随机，也可以设置概率） if(flag==true&&cycle>=5&& index==parseInt(Trim('4'))){ quick=0; clearInterval(Time); index=0; document.getElementById("btn").disabled=false; } } </script> </body> </html>
原理很简单，html部分大家都会写了，就是用表格排个样子，当然也可以用<li>来排
Js部分，首先是创建数组，最后可得到一个数组，数组内容为表格最外圈的坐标的集合，然后根据数组与表格外圈相对应，给最外圈的表格加非选中与选中的样式，然后循环执行，最后根据转动的圈数让函数停止执行
//结束转动并选中号码
//trim里改成数字为最终停止的地方（可以自己建一个数组，让数字从数组里面取值，这样可以随机，也可以设置概率）
if(flag==true&&cycle>=5&& index==parseInt(Trim('4'))){
quick=0;
clearInterval(Time);
index=0;
document.getElementById("btn").disabled=false;
}
随机很好设置：
就是再创建一个包含表格最外圈序号的数组，然后trim里的值从数组里面随机读取一个就行了
概率也可以做到：
创建一个包含表格最外圈序号的数组，让表格最外圈对应的序号依次在数组中重复多少次，根据序号在数组中重复的次数来设置概率，然后随机从数组读取一个值