**
实例： 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单
。。。。。。。
**
今天也是学习的一天，学习了知识之后，使用才能加深我们的记忆，今天做的是一个简单的实际操作，就是利用键盘事件实现小人快跑。
**
关注小文我们一起学习进步。
我们可以利用我们的“上、下、左、右”和“W、S、A、D”来控制我们的小人在屏幕上进行上下左右的移动。
注意：光理论是不够的 ,在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，点击此处免费获取，小白勿进哦
首先肯定要想到我们的键盘事件，然后要想到我们的keycode。然后我们就可以开始一步一步的写了：
首先将我们最起初的第一张图放上去就是我们打开页面是一个正对着我们的小人
然后将他设置定位，这样我们才可以在后面让它动起来
然后获取我们图片的节点：
前面的键盘事件我们有学过，要让他动起来不是给这个要动的对象添加节点，而是给我们的document文档添加事件：里面用一个if函数来判断我们小人移动的条件，满足即可移动，由于上下左右和WSAD都可以控制，那么在条件里还需要用到我们的 “||” 或，
当然这里因为我们的小人动起来是五张图片进行切换实现它的动起来，而不仅仅是图片的平移，图片的变化是从图0到图4，然后返回图0继续循环，所以我们每一个if判断之后的执行里都要这么写一个循环，那就会显得有一点麻烦，所以我们就在开头先封装一个函数，（这样只用写一次），我们下面只需要进行调用即可
那么这个小训练到此便是完成了，
那么下面附上我们完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
//给小人设置定位
#xiaoren{
left: 500px;
top: 250px;
position: absolute;
}
</style>
<body>
//初始的小人图片
<img src="images/down-0.png" id="xiaoren">
<script>
var xr = document.getElementById("xiaoren");
//小人移动的图片循环
var i = -1;
function fn(fangxiang){
i++;
if(i>=5){
i=0;
}
xr.src ="images/"+fangxiang+"-"+i+".png";
}
document.onkeydown = function(e){
var evt=window.event || e;
if(evt.keyCode==37 || evt.keyCode==65){
xr.style.left = xr.offsetLeft-10+"px";
fn("left");
}else if(evt.keyCode==38 || evt.keyCode==87){
xr.style.top = xr.offsetTop-10+"px";
fn("up")
}else if(evt.keyCode==39 || evt.keyCode==68){
xr.style.left = xr.offsetLeft+10+"px";
fn("right");
}else if(evt.keyCode==40 || evt.keyCode==83){
xr.style.top = xr.offsetTop+10+"px";
fn("down");
}
}
</script>
</body>
</html>
**
