<html>

<head>

<title>键盘控制div移动，解决停顿问题</title>

<meta charset="utf-8" />

<style type="text/css">

#div1{width:100px;height:100px;background:#ff0000;position:absolute;}

</style>

<script type="text/javascript">

window.onload = function(){

    var oDiv = document.getElementById("div1");

    var timer = null;

    var left = false;

    var right = false;

    var top = false;

    var bottom = false;

    setInterval(function(){

        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);

    document.onkeydown = function(ev){

        var ev = ev || event;

        var keyCode = ev.keyCode;

        switch(keyCode){

           case 37: left = true;break;

           case 38: top = true;break;

           case 39: right = true;break;

           case 40: bottom = true;break;

        }

    }

    document.onkeyup = function(ev){

        var ev = ev || event;

        var keyCode = ev.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>

键盘控制div移动并且解决停顿问题（原生js）的更多相关文章

  1. js键盘控制div移动，解决停顿问题

    问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...

  2. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  3. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  6. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  7. 键盘控制div上下左右移动 (转)

    <html> <head> <title></title> <link rel="stylesheet" type=" ...

  8. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. python二叉树的深度遍历之先序遍历流程图

  2. 苹果企业版签名分发相关问题，蒲公英签名，fir.im分发，安装ipa设置信任

    苹果企业版签名分发相关问题,蒲公英签名,fir.im分发,安装ipa设置信任蒲公英 - 高效安全的内测应用发布.管理平台https://www.pgyer.com/app/signature分发版 2 ...

  3. 囤币一族，被中国市场遗忘的价值币ADA

    囤币一族,被中国市场遗忘的价值币ADA ==========================长期囤币目标:trx十万个,ada一万个,eos五千个,nas一千个,ont一千个,eth一百个,比特币十个 ...

  4. jenkins1

    持续集成工具: Jenkins  和 Hudson是同源的. 甲骨文和开源社区之间的关系破裂,该项目被分成两个独立的项目. Jenkins:由大部分原始开发人员组成,Hudson:由甲骨文公司继续管理 ...

  5. JustOj 1974: 简单的事情 （组合数）

    题目描述 数学天才fans曾经说过一句话:组合数的计算是一件非常简单的事情.组合数的计算真的是一件非常简单的事情吗?请你自己去尝试一下吧! 输入 输入中的一些整数对n,m(m≤n≤20) 输出 输出其 ...

  6. （2018干货系列四）最新Python学习路线整合

    怎么学Python Python是一种面向对象的解释型计算机程序设计语言,纯粹的自由软件,常被昵称为胶水语言,能够把用其他语言制作的各种模块(尤其是C/C++)很轻松地联结在一起. Python初级开 ...

  7. SOAPUI 案例操作步骤

    1. 构建项目 2. 运行单个请求 3. 构建测试用例 4. 接口之间传递参数 5. 运行整个测试用例 构建测试 以天气接口为例: 接口: http://ws.webxml.com.cn/WebSer ...

  8. 如何解决win10关机状态下，按键盘会自动开机的问题

    关机状态下按下键盘会自动开机,是因为所装的系统默认设置了快速启动功能 下面是关闭快速启动的方法: 步骤一: 在win10桌面右击,点击显示设置 步骤二: 电源和睡眠-->其他电源设置 步骤三: ...

  9. Spring Boot(六)：如何使用mybatis

    Spring Boot(六):如何使用mybatis orm框架的本质是简化编程中操作数据库的编码,发展到现在基本上就剩两家了,一个是宣称可以不用写一句SQL的hibernate,一个是可以灵活调试动 ...

  10. python简说（二十三）发邮件

    import yagmailusername='uitestp4p@163.com'password='houyafan123'#生成授权码,qq.163.126都是授权码 mail_server = ...