jquery实现简单抽奖功能
一直纠结要怎么用jquery实现抽奖功能，看别人很多都是用flash制作的，找了很多资料，最终找到一个比较适合需求的，我做了些许调整，以下是代码展示（复制下来可以直接使用）。
先上图：
<!DOCTYPE html> <html> <head> <title>抽奖页面</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link rel="stylesheet" href="http://static1.cdn.1happy.com/assets/base/reset.css"/> <script type="text/javascript" src="http://static1.cdn.1happy.com/assets/lib/jquery-1.10.2.js"></script> <style type="text/css"> body { background: #190700; } .header { height: 528px; background: url("http://imgs3.mxthcdn.com/d/I36gcdpl9nl3895837844_BOPkGh.jpg") no-repeat top center; } .active-inner,.wrapper-inner { width: 1000px; margin: 0 auto; } .active { height: 142px; background: url("http://imgs2.mxthcdn.com/g/I26gcdpnjl62772276630_HKkCBB.jpg") no-repeat top center; } .search { text-align: center; } .search a { display: inline-block; width: 127px; height: 50px; margin-left: 5px; } /* 中间抽奖转盘 */ .wrapper { height: 530px; background: url("http://imgs1.mxthcdn.com/n/I16gce006nk2098941450_rwSCBi.jpg") no-repeat top center; } .luck { position: relative; float: right; margin-right: 85px; display: inline; width: 450px; height: 485px; text-align: center; } .luck .hd a,.luck .bd .gift { background: url("http://imgs1.mxthcdn.com/d/I16gce07mgp4271535942_clNbBR.jpg") no-repeat; } .luck .hd a { display: inline-block; width: 116px; height: 30px; margin: 5px; background-position: -100px 0; font-size: 20px; color: white; } .luck .bd .gift { height: 350px; padding: 11px 14px; background-position: 0 -35px; } /* 开始按钮 */ .start { position: absolute; left: 98px; top: 141px; width: 255px; height: 174px; cursor: pointer; } .gift table td { width: 85px; height: 88px; } .playcurr{ background-color:#F60; opacity: 0.5; filter: Alpha(opacity=50); } /* 温馨提示 */ .tips { margin-top: 5px; text-align: left; color: white; font-family: "宋体"; } </style> </head> <body> <div class="header"></div> <div class="active"> <div class="active-inner"> <div class="search"> <a href="#"></a> <a href="#"></a> </div> </div> </div> <div class="wrapper"> <div class="wrapper-inner"> <div></div> <div class="luck"> <div class="hd"> <a href="#">抽奖10次</a> <a href="#">抽奖50次</a> </div> <div class="bd"> <div class="start"></div> <div class="gift"> <table id="tb" cellpaddig="0" cellspacing="0"> <tr><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td></tr> </table> </div> </div> <script type="text/javascript"> $(".start").click(function(){ StartGame(); }) /* * 删除左右两端的空格 */ 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(4,5), //初始化数组 EndIndex=0, //决定在哪一格变慢 tb = $("#tb"), //获取tb对象 cycle=0, //转动圈数 EndCycle=0, //计算圈数 flag=false, //结束转动标志 quick= 0, //加速 end = 0; btn = $(".start"); function StartGame(){ clearInterval(Time); cycle=0; flag=false; EndIndex = 6+Math.floor(Math.random()*10); end = 1+Math.floor(Math.random()*13); //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(end-1)){ quick=0; clearInterval(Time); } tb[0].rows[arr[index][0]].cells[arr[index][1]].className="playcurr"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb[0].rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className=""; index++; quick++; } </script> <div class="tips"> <p> 温馨提示：<br/> 抽奖次数将于11月30号23:59分清空，请您务必在此之前用完抽奖次数！ 活动中奖名单：“大奖中奖名单详情请点击查看” </p> </div> </div> </div> </div> </body> </html>
