javascript按键盘上/右/下/左箭头加速运动
<!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按键盘上/右/下/左箭头加速运动的更多相关文章
- JS判断键盘上的上下左右键
document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...
- javascript 获取键盘上的按键代码KeyCode
Enter键的keyCode为13 Alt + Enter 的keyCode为10 $(document).on( 'keypress', function ( e ) { console.log( ...
- Atitit.获得向上向下左的右的邻居的方法 软键盘的设计..
Atitit.获得向上向下左的右的邻居的方法 软键盘的设计.. Left right可以直接使用next prev.. Up down可以使用pix 判断...获得next element的posit ...
- Unity3D_(游戏)控制物体的上、下、左、右移动
通过键盘上↑.↓.←.→实现对物体的控制 using System.Collections; using System.Collections.Generic; using UnityEngine; ...
- 剑指offer系列——二维数组中,每行从左到右递增,每列从上到下递增,设计算法找其中的一个数
题目:二维数组中,每行从左到右递增,每列从上到下递增,设计一个算法,找其中的一个数 分析: 二维数组这里把它看作一个矩形结构,如图所示: 1 2 8 2 4 9 12 4 7 10 13 6 8 11 ...
- js实现Mac触摸板双指事件(上、下、左、右、放大、缩小)
前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...
- 《剑指Offer》第1题(Java实现):在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。
一.题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该 ...
- js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)
前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...
- EasyUI 左,右(上、下)布局
左,右(上.下)布局 <body class="easyui-layout"> <div data-options="region:'west',col ...
随机推荐
- python学习(五) 条件、循环和其他语句
第五章 条件.循环和其他语句 5.1 print和import的更多信息 5.1.1 使用逗号输出 >>> print('age',43,45) // 可以用逗号隔开 ...
- PCB上 如何显示 汉字
原理图上有汉字,那如何在PCB上显示汉子呢 ? 而不至于显示乱码 按如下操作 ,双击乱码 ,进入设置模式 设置好后,显示的字体样式.
- Py修行路 python基础 (四)运算 copy
字符串的格式化 在字符串中插入 %s ,作为占位符,后边儿再定义插入变量. 算术运算 % 取模 判断奇偶数 / 除法 有小于号 // 取整除 返回整数部分 逻辑运算 and or not ' ...
- catkin 工作空间 - Package 组成
package 是 ROS 软件的基本组织形式,ROS 就是由一个个的 package 组成的 package 是 catkin 的编译基本单元 一个 package 可以包含多个可执行文件(节点) ...
- windows右键打开方式里面添加新的应用程序
1.打开注册表编辑器.打开运行窗口,快捷键,开始+R.输入“regedit”,回车确定. 2.进入注册表编辑器的HKEY_CLASSES_ROOT文件夹下的*子文件夹下的shell文件夹. 3.右键s ...
- DataTable改变column类型
1.必须先克隆DataTable 2.列换类型 3.逐行往新DataTable赋值,并转换某列类型 如: DataTable dt = diorg.Clone(); //必须先克隆,此时并不包含数据 ...
- cs231n神经网络 常用激活函数
CS231n课程笔记翻译:神经网络笔记1(上) 一.常用激活函数 每个激活函数(或非线性函数)的输入都是一个数字,然后对其进行某种固定的数学操作.下面是在实践中可能遇到的几种激活函数: ——————— ...
- VB.NET使用TagLib#读取MP3中的ID3v2标签
Taglib#是一个为.NET开发的元数据读取类库,为一个开源项目,可以在他们的官网上获取windows版本的源码包或者编译好的类库:http://download.banshee.fm/taglib ...
- android 除法运算保留小数点
java保留两位小数问题: 方式一: 四舍五入 double f = 111231.5585; BigDecimal b = new BigDecimal(f); double f1 = b.setS ...
- 华为部分真机调试无法显示log问题解决
真机测试时,部分华为手机无法获取全部的log信息.或者说无法获取Error以下级别的log信息.比如P7 这是因为部分华为机出厂默认log设置为关闭状态,因此只能获取Error以上级别的log信息.蛋 ...