1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>javascript加速运动</title>
  6.  
  7. </head>
  8. <body>
  9. <button style="width:80px; height:40px; line-height:40px; text-align:center; background:linear-gradient( to left ,#999,#d96972,#cc1233,#d96972); position:fixed; top:200px; left:200px;border:0">加速</button>
  10.     <script type="text/javascript">
  11.         var btn = document.getElementsByTagName('button')[0];
  12.         //创建一个div
  13.         var div = document.createElement('div');
  14.         document.body.appendChild(div);
  15.         div.style.width='100px';
  16.         div.style.height='100px';
  17.         div.style.backgroundColor='red';
  18.         div.style.position='absolute';
  19.         div.style.left='0';
  20.         div.style.top='0';
  21.         var speed = 5;
  22.         btn.onclick=function(){
  23.             speed++;
  24.         }
  25.         console.log('速度'+speed);
  26.         //onkeydown 事件会在用户按下一个键盘按键时发生。
  27.         document.onkeydown = function(e){
  28.             // console.log(e)//打印e就知道以下数字的由来
  29.             switch (e.which) {
  30.                 //向上
  31.                 case 38:
  32.                     div.style.top = parseInt(div.style.top) - speed + 'px';
  33.                     break;//来阻止代码自动地向下一个 case 运行
  34.                 //向下
  35.                 case 40:
  36.                     div.style.top = parseInt(div.style.top) + speed + 'px';
  37.                     break;
  38.                 //向左
  39.                 case 37:
  40.                     div.style.left = parseInt(div.style.left) - speed + 'px';
  41.                     break;
  42.                 //向右
  43.                 case 39:
  44.                     div.style.left = parseInt(div.style.left) + speed + 'px';
  45.                     break;
  46.             }
  47.         }
  48.     </script>
  49.  
  50. </body>
  51. </html>

javascript按键盘上/右/下/左箭头加速运动的更多相关文章

  1. JS判断键盘上的上下左右键

    document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...

  2. javascript 获取键盘上的按键代码KeyCode

    Enter键的keyCode为13 Alt + Enter 的keyCode为10 $(document).on( 'keypress', function ( e ) { console.log( ...

  3. Atitit.获得向上向下左的右的邻居的方法 软键盘的设计..

    Atitit.获得向上向下左的右的邻居的方法 软键盘的设计.. Left right可以直接使用next prev.. Up down可以使用pix 判断...获得next element的posit ...

  4. Unity3D_(游戏)控制物体的上、下、左、右移动

    通过键盘上↑.↓.←.→实现对物体的控制 using System.Collections; using System.Collections.Generic; using UnityEngine; ...

  5. 剑指offer系列——二维数组中，每行从左到右递增，每列从上到下递增，设计算法找其中的一个数

    题目:二维数组中,每行从左到右递增,每列从上到下递增,设计一个算法,找其中的一个数 分析: 二维数组这里把它看作一个矩形结构,如图所示: 1 2 8 2 4 9 12 4 7 10 13 6 8 11 ...

  6. js实现Mac触摸板双指事件（上、下、左、右、放大、缩小）

    前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

  7. 《剑指Offer》第1题（Java实现）：在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。

    一.题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该 ...

  8. js实现Mac触摸板双指事件（上/下/左/右/放大/缩小）

    前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

  9. EasyUI 左，右（上、下）布局

    左,右(上.下)布局 <body class="easyui-layout"> <div data-options="region:'west',col ...

随机推荐

  1. mybatis generator 用法

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  2. 双杀 0day 漏洞（CVE-2018-8174）复现

    漏洞描述: CVE-2018-8174 是 Windows VBScript Engine 代码执行漏洞. 微软在4月20日早上确认此漏洞,并于5月8号发布了官方安全补丁,对该 0day 漏洞进行了修 ...

  3. WordPress,discuz 根据不同的入口url更换logo

    Discuz!中调用cookie的思路出来了:    设置cookie:dsetcookie('cookie名', 'cookie值', '有效时间'); 读取cookie有两种方法,第一种使用get ...

  4. Windchill 设计变更流程卡死查询方法

    设计变更流程卡死查询方法 1. 导出设计变更表单查看填写了“需要”和“是”字眼的文本框  2.打开进程管理器显示流程卡死的地方,确定哪里出错导致没法执行下一步  3.打开设计变更流程图,里面可以查看有 ...

  5. 有关Lucene的问题(4):影响Lucene对文档打分的四种方式

    原文出自:http://forfuture1978.iteye.com/blog/591804点击打开链接 在索引阶段设置Document Boost和Field Boost,存储在(.nrm)文件中 ...

  6. day58-activiti 02-历史数据查询

    Activity 笔记  第二天 今天内容安排: 1.历史数据查询 办过多少个任务, 这些历史数据有时候我们也需要去查询一下. 本身day02这个项目就没有导jar包,有点类似于maven,在你的项目 ...

  7. Mask_RCNN openpose AlphaPose Kinect姿态识别

    1.Mask_RCNN ---------------------------------------------------------------------------------------- ...

  8. 4-拷贝我的eclipse写安卓的配置说明

    1.下载加压: 2.配置关于jdk的javahome路径,配置过eclipse的到这里就可以了,否则百度ecplise安装配置环境变量即可: 3.以安卓项目方式加入appcompat-v7; 4.每次 ...

  9. Apache htcacheclean命令

    一.简介 htcacheclean可以用于将mod_disk_cache的磁盘缓冲区占用的空间保持在一个合理的水平.这个工具可以手动运行也可以作为后台守护进程运行.当作为守护进程运行的时候,它将每隔一 ...

  10. jq一行一行循环读取table中的元素

    获取当前tr行号,可依据index 获取当前tr对象 获取某一tr下td的内容