天天看点

一个简单的抽奖转盘游戏

聽 聽鍦ㄤ竴涓」鐩腑瑕佸仛涓€涓父鎴?鍦ㄨ繖涓繃绋嬩腑鍋氫簡涓€涓畝鍗曠殑9瀹牸鎶藉娓告垙銆傚ぇ浣撴€濊矾鏄?鐐瑰嚮寮€濮嬫寜閽紝娓告垙寮€濮嬨€傜敱涓€涓€愭閫掑鍙傛暟 drawStep 鏉ユ帶鍒舵牸瀛愮殑鑳屾櫙棰滆壊鐨勬敼鍙橈紝娓告垙鍋滄鐨勪綅缃弬鏁?stopPosition 鐢遍殢鏈哄嚱鏁扮敓鎴愶紝浠ユ鏉ユ帶鍒舵牸瀛愬仠姝㈢殑浣嶇疆銆傛父鎴忚浆鍔ㄤ竴鍦堟槸8涓牸瀛?5鍦堝氨鏄?0.easeTime鍙傛暟妯℃嫙鏍煎瓙杞姩鐨勭紦姝ュ惎鍔ㄥ拰缂撴鍋滄銆?

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>绠€鍗曟娊濂栨父鎴?lt;/title>
<style type="text/css">
*{margin:0; padding:0;}
table{width:400px; height:500px; margin:0 auto; text-align:center;}
td{border:1px solid #900;}
.run{background:#F00;}
</style>
</head>

<body>
<table>
<tr><td class="gif_icon gif_0">濂栧搧1</td><td class="gif_icon gif_1">濂?
鍝?</td><td class="gif_icon gif_2">濂栧搧3</td></tr>
<tr><td class="gif_icon gif_7">濂栧搧8</td><td><button>寮€濮?
</button></td><td class="gif_icon gif_3">濂栧搧4</td></tr>
<tr><td class="gif_icon gif_6">濂栧搧7</td><td class="gif_icon gif_5">濂?
鍝?</td><td class="gif_icon gif_4">濂栧搧5</td></tr>
</table>
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<script type="text/javascript">
$(function(){
   var drawTimer=null;
   var drawStep=-1;     
   var easeTime=2;//缂撳姩璁℃椂
   var stopPosition=1;    

   $('button').click(function(){    
       stopPosition=Math.floor(Math.random()*8+1); 
       drawTimer=setTimeout(drawRun,easeTime*100);
   }); 
   function drawRun(){//鎶藉娓告垙婊氬姩     
              if(drawStep>= ( 40+stopPosition ) ){                     

 
                 $('.gif_'+(drawStep%8)).css('background','#f00');
                  drawStep=stopPosition;    
                  easeTime=2;    
                  msg(drawStep+1);      
                  clearTimeout(drawTimer);              
                  return;
              }          
              if(drawStep>=(36+stopPosition)){
                  easeTime+=1;              
              }else{
                  if(easeTime<=2){
                      easeTime=2;
                  }
                  easeTime--;
              }          
              drawStep++;                          
              $('.gif_icon').each(function(index){
                   $(this).css('background','#fff');
              }); 
              $('.gif_'+(drawStep%8)).css('background','#f00');
              drawTimer=setTimeout(drawRun,easeTime*70);               

 
  }
  
  function msg(num){
          alert('鎭枩鎮ㄦ娊涓簡濂栧搧'+num);
  }
})
</script>
</body>
</html>
           

继续阅读