JS实现转动随机数抽奖的特效代码

  1. <!Doctype html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK">  
  5. <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>  
  6. <style type="text/css">  
  7. body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}  
  8. ul,ol,li{list-style:none;}  
  9. input,button{margin:0;font-size:12px;vertical-align:middle;}  
  10. body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; background:url(../images/BG.jpg) repeat-y;}  
  11. table{border-collapse:collapse;border-spacing:0;}  
  12. .box{ padding:9px 0 0 11px; 759px; height:611px; background:#ccc; margin:20px auto; }  
  13. .inbox{ 751px; height:596px;position:relative;}  
  14. #random_box li{ position:absolute; 144px; overflow:hidden; height:144px; border:3px solid #c7c5ca; background:#fff;}  
  15. #random_box li img{ 144px; display:block; height:144px;}  
  16. .ok{ display:block; 442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;}  
  17. #random_1{ left:0; top:0;}  
  18. #random_2{ left:148px;top:0;}  
  19. #random_3{ left:296px;top:0;}  
  20. #random_4{ left:444px;top:0;}  
  21. #random_5{ left:592px;top:0; }  
  22. #random_6{ left:592px;top:148px;}  
  23. #random_7{ left:592px; top:298px;}  
  24. #random_8{ left:592px; top:446px;}  
  25. #random_9{ left:444px; top:446px;}  
  26. #random_10{ left:296px; top:446px;}  
  27. #random_11{ left:148px; top:446px;}  
  28. #random_12{ left:0; top:446px;}  
  29. #random_13{ left:0; top:298px;}  
  30. #random_14{ left:0; top:148px;}  
  31. #random_box li.random_current{border:1px solid red;}  
  32. </style>  
  33. </head>  
  34. <body>  
  35. <div class="box">  
  36.  <div class="inbox">  
  37.  <ul id="random_box">  
  38.  <li id="random_1">1</li>  
  39.  <li id="random_2">2</li>  
  40.  <li id="random_3">3</li>  
  41.  <li id="random_4">4</li>  
  42.  <li id="random_5">5</li>  
  43.  <li id="random_6">6</li>  
  44.  <li id="random_7">7</li>  
  45.  <li id="random_8">8</li>  
  46.  <li id="random_9">9</li>  
  47.  <li id="random_10">10</li>  
  48.  <li id="random_11">11</li>  
  49.  <li id="random_12">12</li>  
  50.  <li id="random_13">13</li>  
  51.  <li id="random_14">14</li>   
  52.  </ul>  
  53.  <b class="ok" onClick="StartGame()">抽奖</b>  
  54.  </div>  
  55. </div>  
  56. <script>  
  57. var index=1,   //当前亮区位置  
  58. prevIndex=14,   //前一位置  
  59. Speed=300,   //初始速度  
  60. Time,   //定义对象  
  61. arr_length = 14; //GetSide(5,5),   //初始化数组  
  62. EndIndex=1,   //决定在哪一格变慢  
  63. cycle=0,   //转动圈数   
  64. EndCycle=3,   //计算圈数  
  65. flag=false,   //结束转动标志  
  66. random_num=1,  //中奖数  
  67. quick=0;   //加速  
  68.    
  69.    
  70. function StartGame(){  
  71. $("#random_box li").removeClass("random_current"); //取消选中  
  72.  //random_num = parseInt($("#txtnum").val());//  
  73.  random_num = Math.floor(Math.random()*13+2); //产出随机中奖数2--12之间  
  74.  index=1; //再来一次,从1开始  
  75.  cycle=0;  
  76.  flag=false;  
  77.  //EndIndex=Math.floor(Math.random()*12);  
  78.  if(random_num>5) {  
  79.  EndIndex = random_num - 5; //前5格开始变慢  
  80.  } else {  
  81.  EndIndex = random_num + 14 - 5; //前5格开始变慢  
  82.  }  
  83.  //EndCycle=Math.floor(Math.random()*3);  
  84.  Time = setInterval(Star,Speed);  
  85.    
  86. }  
  87. function Star(num){  
  88.  //跑马灯变速  
  89.  if(flag==false){  
  90.   //走五格开始加速  
  91.   if(quick==5){  
  92.    clearInterval(Time);  
  93.    Speed=50;  
  94.    Time=setInterval(Star,Speed);  
  95.   }  
  96.   //跑N圈减速  
  97.   if(cycle==EndCycle+1 && index-1==EndIndex){  
  98.   clearInterval(Time);  
  99.    Speed=300;  
  100.    flag=true;   //触发结束  
  101.    Time=setInterval(Star,Speed);  
  102.   }  
  103.  }  
  104.    
  105.  if(index>arr_length){  
  106.   index=1;  
  107.   cycle++;  
  108.  }  
  109.    
  110.  //结束转动并选中号码  
  111.  if(flag==true && index==parseInt(random_num)){   
  112.   quick=0;  
  113.   clearInterval(Time);  
  114.  }  
  115.  $("#random_"+index).addClass('random_current'); //设置当前选中样式  
  116.  if(index>1)  
  117.   prevIndex=index-1;  
  118.  else{  
  119.   prevIndex=arr_length;  
  120.  }  
  121.  $("#random_"+prevIndex).removeClass('random_current'); //取消上次选择样式   
  122.  index++;  
  123.  quick++;  
  124. }  
  125. </script>  
  126. </body>  
  127. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/czh-blog/p/6687148.html