聽 聽鍦ㄤ竴涓」鐩腑瑕佸仛涓€涓父鎴?鍦ㄨ繖涓繃绋嬩腑鍋氫簡涓€涓畝鍗曠殑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>