** 实例： 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单 。。。。。。。 ** 关注小文我们一起学习进步。 那么我们就进入例子，先看一下我们的最终结果： 首先先将这两张图片（一张飞机的图片、一张子弹的图片）保存到我们的文件夹里： 然后我们就获取飞机的节点，这里控制飞机移动，和我们上一个训练控制小人快跑的移动一样： 函数传入的两个参数就是我们飞机的top值和left值，当我们按下空格，子弹会在屏幕显示，并且会从我们飞机头的位置射出， Maybe you like to be different, and I’m too ordinary.
今天学习的也是一个例子，利用我们js 实现用我们的上、下、左、右来控制一个小飞机的移动，并且当我们按下空格可以向上发射子弹。
**
注意：光理论是不够的，技术是不断更新的。在此赠送2020最新企业级别Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！
然后就可以开始了：先将我们的飞机和子弹 插入：
但是我们的子弹在没有发射的情况下应该是不出现在屏幕的所以我们要进行设置：style="display: none;"
当然除了移动的四个键，还要添加一个发射子弹的空格键，空格的keycoad是32，为其添加一个函数，当我们按下空格触发：
当然了我们这里子弹射出，垂直向上移动，这里会用到我们前面学到的定时器，每隔一段时间，子弹的位置进行变化：
这里最前面忘记了一个重要的东西，前面的飞机和子弹要设置定位，不然的话我们的飞机是没法动起来的：
好了这样基本上我们就完成了：那么下面附上完整的代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> //给我们插入的所有图片进行定位 img{ position: absolute; left: 0px; top: 0px; } </style> <body> //插入几张子弹的图片 <img src="../images/飞机发射子弹%20图/zidan.png" id="zidan1" style="display: none;"> <img src="../images/飞机发射子弹%20图/zidan.png" id="zidan2" style="display: none;"> <img src="../images/飞机发射子弹%20图/zidan.png" id="zidan3" style="display: none;"> <img src="../images/飞机发射子弹%20图/zidan.png" id="zidan4" style="display: none;"> <img src="../images/飞机发射子弹%20图/zidan.png" id="zidan5" style="display: none;"> //插入的飞机的图片 <img src="../images/飞机发射子弹%20图/feiji.gif" id="fj"> <script> //获取飞机的节点 var fj = document.getElementById("fj"); //给我们的document添加键盘事件 document.onkeydown = function(e){ var e = window.event || e; switch(e.keyCode){ case 37: fj.style.left = fj.offsetLeft-10+"px"; break; case 38: fj.style.top = fj.offsetTop-10+"px"; break; case 39: fj.style.left = fj.offsetLeft+10+"px"; break; case 40: fj.style.top = fj.offsetTop+10+"px"; break; case 32: //我们的子弹是从我们飞机的头头那里射出，相当于我们子弹的offsetTop和我们飞机的 //offsetTop一样,而子弹的offsetLeft是我们飞机的offsetLeft加上我们飞机宽度的一半， //这样就能保证我们的子弹始终是从我们飞机的头那里射出 fashe(fj.offsetTop,fj.offsetLeft+fj.offsetWidth/2); break; } } function fashe(top,left){ for(var i=1;i<6;i++){ var zidan = document.getElementById("zidan"+i); if(zidan.style.display == "none"){ zidan.style.display = "block"; zidan.style.left = left+"px"; zidan.style.top = top+"px"; break; } } } //这里设置一个定时器，每隔一段时间，子弹的位置发生变化，垂直向上移动，就是每隔一段时间我们 //的offsetTop进行减小 setInterval(function(){ for(var i=1;i<6;i++){ var zidan = document.getElementById("zidan"+i); zidan.style.top =zidan.offsetTop-10+"px"; //我们只添加了五发子弹如果子弹无限制的向上移动，那么我们射出五发之后，将不能够继续发射子弹 //所以我们要进行限制，一旦子弹的尾部超出屏幕，那么它便立即消失，那么我们的子弹便能一直发射 //就是只要我们的offsetTop小于我们子弹长度的负数那么 它的display就变为none，这里也和前面 //射出来的时候，变为block形成一个循环 if(zidan.offsetTop<-7){ zidan.style.display = "none"; } } },20); </script> </body> </html>
–————————–大概你喜欢与众不同 而我太过普通
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
87万+