• 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>  
  • 相关阅读:
    Workbox使用策略
    前端性能指标计算方法
    make源文件时出现 /usr/bin/ld: cannot find -lstdc++ 错误
    mac 支持rz sz
    v8引擎的优化
    pixi与lottie-web的benchmark测试
    alinode与官方node性能测试方法及分析
    2019年RTC大会记录
    后端数据推送-EventSource
    技术选型需要关注的软件开源协议
  • 原文地址：https://www.cnblogs.com/czh-blog/p/6687148.html
Copyright © 2020-2023  润新知