<!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. C++面试题（三）

    1 什么是函数对象?有什么作用? 函数对象却具有许多函数指针不具有的有点,函数对象使程序设计更加灵活,而且能够实现函数的内联(inline)调用,使整个程序实现性能加速. 函数对象:这里已经说明了这是 ...

  2. hbase集群配置

    说明 安装 配置 启动 网页效果 一点废话 本文介绍hbase集群配置 说明 hbase想正确配置成功的前提是,你必须知道hadoop集群和zookeeper集群是如何配置的 安装 下载地址 http ...

  3. Deep Learning 学习笔记（7）：神经网络的求解 与 反向传播算法（Back Propagation）

    反向传播算法(Back Propagation): 引言: 在逻辑回归中,我们使用梯度下降法求参数方程的最优解. 这种方法在神经网络中并不能直接使用, 因为神经网络有多层参数(最少两层),(?为何不能 ...

  4. pandas层级索引

    层级索引(hierarchical indexing) 下面创建一个Series, 在输入索引Index时,输入了由两个子list组成的list,第一个子list是外层索引,第二个list是内层索引. ...

  5. 在Centos7中安装elasticsearch5.5

    在Centos7中安装elasticsearch5.5 第一步:必须要有jre支持 elasticsearch是用Java实现的,跑elasticsearch必须要有jre支持,所以必须先安装jre ...

  6. leetcode696

    本题先寻找字符串中0变1,或者1变0的位置作为分隔位置.然后从这个分隔位置同时向左.右两侧搜索. 找到的左连续串和右连续串,都进行累计. public class Solution { public ...

  7. RAD 10 蓝牙

    http://docwiki.embarcadero.com/Libraries/Seattle/en/System.Bluetooth.TBluetoothLEManager.StartDiscov ...

  8. 清除苹果手机input的默认样式

    在手机端上写了一个页面,按钮的地方是用input标签button按钮,给的是绿色的背景颜色,在安卓手机上显示正常,在苹果手机上显示不正常,如下图 解决办法: css加上下面这一行代码就可以了,inpu ...

  9. JanusGraph ：Cassandra作为存储后端的情况下，JanusGraph的安装方法

    Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...

  10. SQLServer中的事物与锁

    了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...