** 实例： 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单 。。。。。。。 ** 关注小文我们一起学习进步。 我们可以利用我们的“上、下、左、右”和“W、S、A、D”来控制我们的小人在屏幕上进行上下左右的移动。 首先将我们最起初的第一张图放上去就是我们打开页面是一个正对着我们的小人 那么下面附上我们完整的代码： **
今天也是学习的一天，学习了知识之后，使用才能加深我们的记忆，今天做的是一个简单的实际操作，就是利用键盘事件实现小人快跑。
**
首先肯定要想到我们的键盘事件，然后要想到我们的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>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
2331