其實這個示例用到了js的兩個核心時間，鍵盤事件onkeydown，週期執行事件setInterval。
實現效果
當按下鍵盤某個鍵時網頁中的人物實現相應的動作，達到利用鍵盤控制走動效果
實現步驟
一、預訂鍵值作用：
w：向上
s：向下
a：向左
d：向右
空格：停止
二、預訂鍵值後，要能捕獲按鍵事件以及判斷用戶按的是哪個鍵？
捕獲鍵盤事件可以用onkeydown
獲取鍵值碼可以用event.keyCode
三、用setInterval週期執行事件替換圖片
替換圖片是為了實現任務走動效果
但要注意使用clearInterval清除週期執行，否則會越走越快
示例代碼：
<html><head><meta charset="utf-8" /><title>人物走動</title></head><body onkeydown="show()"><ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;"><li>w：向上</li><li>s：向下</li><li>a：向左</li><li>d：向右</li><li>空格：停止</li><li style="margin-top:20px;"><u><a href="//www.VeVB.COm">武林網</a></u></li></ul><div style="position:absolute;top:0;left:0" id='di'><img src="//files.VeVB.COm/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div><script>var img1='//files.VeVB.COm/file_images/article/201408/201482791656841.gif?201472791722';var img2='//files.VeVB.COm/file_images/article/201408/201482791327688.gif?201472791345';var x=0;var y=0;var xs=0;var ys=0;var flag=true;var zq=null;function ks(){zq=setInterval(function(){var s=document.getElementById('img');var str=s.src;var area=document.getElementById('di');var xpos=parseInt(area.style.left);var ypos=parseInt(area.style.top);x=x+xs;y=y+ys;area.style.left=x;area.style.top=y;var pos=str.lastIndexOf('/')+1;var hz=str.substr(pos);if(hz==img1){s.src= img2;}else{s.src= img1;}},50);}ks();function show(){var sz=window.event.keyCode;switch(sz){case 87:img1='//files.VeVB.COm/file_images/article/201408/ren_h_1.gif';img2='//files.VeVB.COm/file_images/article/201408/ren_h_2.gif';ys=-5;xs=0;break;case 65:img1='//files.VeVB.COm/file_images/article/201408/ren_l_1.gif';img2='//files.VeVB.COm/file_images/article/201408/ren_l_2.gif';xs=-5;ys=0;break;case 68:img1='//files.VeVB.COm/file_images/article/201408/ren_r_1.gif';img2='//files.VeVB.COm/file_images/article/201408/ren_r_2.gif';xs=5;ys=0;break;case 83:img1='//files.VeVB.COm/file_images/article/201408/ren_q_1.gif';img2='//files.VeVB.COm/file_images/article/201408/ren_q_2.gif';ys=5;xs=0;break;case 32: if(flag){ clearInterval(zq); flag=false; break; }case 13: if(!flag){ ks(); flag=true;break; }}}</script></body></html>