js 键盘点击事件
回车键(Enter)的触发事件 js 代码如下：
document.onkeydown = function (e) {
if (!e) e = window.event;
if ((e.keyCode || e.which) == 13) {
alert("触发了enter回车键！");
}
}
键盘事件顺便做下测试demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件测试</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
position: relative;
}
.img{
width: 32px;
height: 32px;
position: absolute;
}
</style>
</head>
<body>
<img src="img/right.png" alt="" class="img" id="img">
<script>
window.onload = function(){
var ismove = "";
var img = document.getElementsByClassName("img")[0];
var width = getWidth();
var height = getHeight();
document.onkeydown = function(e){
e = e || event;
// console.log(e.keyCode) //获取键盘编码
if(e.keyCode == 37 || e.keyCode == 65){
ismove = "left";
}
else if(e.keyCode == 38 || e.keyCode == 87){
ismove = "top";
}
else if(e.keyCode == 39 || e.keyCode == 68){
ismove = "right";
}
else if(e.keyCode == 40 || e.keyCode == 83){
ismove = "bottom";
}
}
document.onkeyup = function(){
ismove = "";
}
var timer = setInterval(function(){
switch(ismove){
case "left":
img.style.left = img.offsetLeft - 3 +"px";
img.src = "img/left.png";
break;
case "right":
img.style.left = img.offsetLeft + 3 +"px";
img.src = "img/right.png";
break;
case "top":
img.style.top = img.offsetTop - 3 +"px";
img.src = "img/top.png";
break;
case "bottom":
img.style.top = img.offsetTop + 3 +"px";
img.src = "img/down.png";
break;
}
if(img.offsetLeft<=0){
img.style.left = "0px"
}
if(img.offsetTop<=0){
img.style.top = "0px"
}
if(img.offsetLeft>=width - img.offsetWidth){
img.style.left = width - img.offsetWidth + "px"
}
if(img.offsetTop>=height - img.offsetHeight){
img.style.top = height - img.offsetHeight + "px"
}
}, 10);
// 获取页面可视区宽高 兼容所有浏览器 （简写）
function getWidth(){
return window.innerWidth || document.compatMode == CSS1Compat ? document.documentElement.clientWidth : document.body.clientWidth;
}
function getHeight(){
return window.innerHeight || document.compatMode == CSS1Compat ? document.documentElement.clientHeight : document.body.clientHeight;
}
// 获取页面可视区宽高 兼容所有浏览器
// function getWidth(){
// if(window.innerWidth){
// return window.innerWidth;
// }
// else{
// if(document.compatMode == "CSS1Compat"){
// return document.documentElement.clientWidth;
// }
// else{
// return document.body.clientWidth;
// }
// }
// }
// function getHeight(){
// if(window.innerHeight){
// return window.innerHeight;
// }
// else{
// if(document.compatMode == "CSS1Compat"){
// return document.documentElement.clientHeight;
// }
// else{
// return document.body.clientHeight;
// }
// }
// }
}
</script>
</body>
</html>
四个小坦克图片如下;
js 键盘点击事件的更多相关文章
- js模拟点击事件实现代码
js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...
- JS通过键盘点击事件实现div移动
页面内容:文本框模拟键盘点击 div元素实现移动: <body> <textarea id="myarea"></textarea> < ...
- jquery/js记录点击事件，单击次数加一，双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...
- selenium自动化之js处理点击事件失效
有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- JS——按钮点击事件累加注册问题
最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...
- js阻止点击事件的冒泡的实现
<html> <head> <script type="text/javascript"> function fnclick1(){ alert ...
- js利用点击事件做一个简单的计算器
先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
随机推荐
- 洛谷 P3391 文艺平衡树
题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 --b ...
- BZOJ4516: [Sdoi2016]生成魔咒(后缀数组 set RMQ)
题意 题目链接 Sol 毒瘤SDOI 终于有一道我会做的题啦qwq 首先,本质不同的子串的个数 $ = \frac{n(n + 1)}{2} - \sum height[i]$ 把原串翻转过来,每次就 ...
- Spring与Web整合
一 概述 1.整合目的 将所有对象的创建与管理任务交给Spring容器,降低程序的耦合度. 2.整合途径 将Spring容器注入到Web容器中. 3.具体实现 使用ServletContextList ...
- js实现toFixed截取效果
Number.prototype.toFixed = function(fractionDigits) { ; || f > ) { throw new RangeError("Pre ...
- Hello,world的几种写法！
这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...
- Linux时间同步＋国内常用的NTP服务器地址
当Linux服务需要时间戳的时候,时间同步就显得十分重要.这里介绍下,最近我使用的一个同步命令. # ntpdate s1a.time.edu.cn 国内常用的NTP地址 210.72.145.44 ...
- php自动获取上一个月的起始时间
1.借鉴评论的方法[20170309 edit] function get_month_start_end($timestamp) { !empty($timestamp) OR $timestamp ...
- 安装 GraphicsMagick
yum -y install GraphicsMagick GraphicsMagick-devel 实际试了试,上面yum的方式不好使,下面是我实际安装过程: 1.下载最新版 wget ftp:// ...
- Oracle - ORA-28547: Connection to server failed,probable Oracle Net admin error (Navicat)
一.异常 用Navicat连接Oracle数据库时抛出的异常 二.方案 使用 Oracle 安装目录 \Oracle\product\11.2.0\dbhome_1\BIN 下的 oci.dll 替换 ...
- eclipse直接使用tomcat安装程序的webapp目录调试
感谢此文:http://blog.csdn.net/soszou/article/details/23673133 本文很多技术及操作来源于此文 需求:因为微信方面的开发调试.为了测试方便,直接构建了 ...