这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要给大家介绍了如何利用原生 js 实现键盘控制 div 移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。
首先说明下为什么会停顿?
效果 :用键盘控制一个 div 移动
当按下一个方向键不放,div 会先停顿一下,然后才开始持续移动。
原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间
注:了解原因才能解决问题
效果展示
1. 简单控制,但是有停顿
2. 简单控制,解决停顿
解决方法
方法 :先开一个定时器,让 div 一直处于(往 4 个方向)准备移动的状态
初始 4 个方向的值都是 false,div 就保持在原地不动。
按下某个方向键,这个方向的值就改变为 true,div 就会开始往这个方向移动。
松开方向键,这个方向的值就改变为 false , div 就停止这个方向移动了。
基本移动,但是有挺顿的代码
- <html>
- <head>
- <title>
- 键盘控制div移动,会有停顿
- </title>
- <meta charset="utf-8" />
- <style type="text/CSS">
- #div1{ width:100px; height:100px; background:greenyellow; position:absolute;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementById("div1");
- document.onkeydown = function(ev) {
- var ev = ev || event;
- var keyCode = ev.keyCode;
- switch (keyCode) {
- case 37:
- oDiv.style.left = oDiv.offsetLeft - 10 + "px";
- break;
- case 38:
- oDiv.style.top = oDiv.offsetTop - 10 + "px";
- break;
- case 39:
- oDiv.style.left = oDiv.offsetLeft + 10 + "px";
- break;
- case 40:
- oDiv.style.top = oDiv.offsetTop + 10 + "px";
- break;
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="div1">
- </div>
- </body>
- </html
控制移动,解决停顿的问题
- <html>
- <head>
- <title>键盘控制div移动并且解决停顿问题</title>
- <meta charset="utf-8" />
- <style type="text/css">
- /*设置div样式*/
- div{
- width:100px;
- height:100px;
- background: #68affc;
- position:absolute;
- left:100px;
- top:100px;
- }
- </style>
- <script>
- //当页面加载完后
- window.onload = function(){
- //获取Div元素
- var oDiv = document.getElementById("div1");
- //创建各个方向条件判断初始变量
- var left = false;
- var right = false;
- var top = false;
- var bottom = false;
- //当按下对应方向键时,对应变量为true
- document.onkeydown = function(ev){
- var oEvent = ev || event;
- var keyCode = oEvent.keyCode;
- switch(keyCode){
- case 37:
- left=true;
- break;
- case 38:
- top=true;
- break;
- case 39:
- right=true;
- break;
- case 40:
- bottom=true;
- break;
- }
- };
- //设置一个定时,时间为50左右,不要太高也不要太低
- setInterval(function(){
- //当其中一个条件为true时,则执行当前函数(移动对应方向)
- if(left){
- oDiv.style.left = oDiv.offsetLeft-10+"px";
- }else if(top){
- oDiv.style.top = oDiv.offsetTop-10+"px";
- }else if(right){
- oDiv.style.left = oDiv.offsetLeft+10+"px";
- }else if(bottom){
- oDiv.style.top = oDiv.offsetTop+10+"px";
- }
- },50);
- //执行完后,所有对应变量恢复为false,保持静止不动
- document.onkeyup = function(ev){
- var oEvent = ev || event;
- var keyCode = oEvent.keyCode;
- switch(keyCode){
- case 37:
- left=false;
- break;
- case 38:
- top=false;
- break;
- case 39:
- right=false;
- break;
- case 40:
- bottom=false;
- break;
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="div1"></div>
- </body>
- </html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的工作或者学习能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0705/329893.html