其实这个示例用到了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>