<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript加速运动</title> </head>
<body>
<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>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0];
//创建一个div
var div = document.createElement('div');
document.body.appendChild(div);
div.style.width='100px';
div.style.height='100px';
div.style.backgroundColor='red';
div.style.position='absolute';
div.style.left='0';
div.style.top='0';
var speed = 5;
btn.onclick=function(){
speed++;
}
console.log('速度'+speed);
//onkeydown 事件会在用户按下一个键盘按键时发生。
document.onkeydown = function(e){
// console.log(e)//打印e就知道以下数字的由来
switch (e.which) {
//向上
case 38:
div.style.top = parseInt(div.style.top) - speed + 'px';
break;//来阻止代码自动地向下一个 case 运行
//向下
case 40:
div.style.top = parseInt(div.style.top) + speed + 'px';
break;
//向左
case 37:
div.style.left = parseInt(div.style.left) - speed + 'px';
break;
//向右
case 39:
div.style.left = parseInt(div.style.left) + speed + 'px';
break;
}
}
</script> </body>
</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. javascript中的垃圾回收

    1引用计数垃圾回收 核心:跟踪记录对象被引用的次数.思路是如果一个对象A被赋值给了一个变量v,则该对象A的引用计数值加1,如果变量v又被赋予其他值了,比如a="str",则该对象A ...

  2. 浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统   网格系统的实现原理,是通过定义 ...

  3. 使用Selenium对付一个点击游戏

    继续来熟悉Selenium的使用,这次来玩一个Html5游戏.原网址在这:http://tianmaying.com/app/clicking/# 游戏是这样的,5秒内你能点击这个按钮几次.一般人都只 ...

  4. leetcode582

    public class Solution { public IList<int> KillProcess(IList<int> pid, IList<int> p ...

  5. PHP 取网页变量

    $_POST["test"]; $_GET["test"];isset();  if(isset($_GET["yyuid"]))

  6. Mycat实战之离散分片

    1 枚举分片(customer表) #### 1.1 修改配置信息加载配置文件 datanode hash-int vi partition-hash-int.txt db1=0 db2=1 [roo ...

  7. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 7 Regularization 正则化

    Lecture7 Regularization 正则化 7.1 过拟合问题 The Problem of Overfitting7.2 代价函数 Cost Function7.3 正则化线性回归  R ...

  8. Asp.net Web Application 打开 SharePoint 2010 Site 错误 The Web application at could not be found

    解决办法如下: 1. 修改项目的.net framework 为3.5 2. Application Pool 选用 Sharepoint App pool 3. 修改 web.config如下: & ...

  9. 3-1 Git下载与安装

    https://desktop.github.com/

  10. 【总结整理】如何判断伪需求(摘自pmcafe)

    1.客户不会直接提需求,都是给解决方案,所以得到用户的反馈之后,先反推一下是很必要的,为什么客户会有这样的方案 总结:方案不合适 例如:客户只会说我要快马,反推一下,其实客户是想要更快,这样的话,解决 ...