zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    1.27
    1.25
    Representation Learning with Contrastive Predictive Coding
    Learning a Similarity Metric Discriminatively, with Application to Face Verification
    噪声对比估计(负样本采样)
    Certified Adversarial Robustness via Randomized Smoothing
    Certified Robustness to Adversarial Examples with Differential Privacy
    Dynamic Routing Between Capsules
    Defending Adversarial Attacks by Correcting logits
    Visualizing Data using t-SNE
  • 原文地址：https://www.cnblogs.com/czh-blog/p/6687148.html
Copyright © 2011-2022 走看看