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 ...
随机推荐
- Spark内部结构详解
参考: https://github.com/JerryLead/SparkInternals/blob/master/markdown/english/5-Architecture.md?winzo ...
- Web前端图形滑块检验组件实现
组件渲染图形: 初始化: ...
- Java基础之JDK的下载与安装
做Java开发已经很长一段时间了,最近在回顾Java的基础知识,感觉好多都是知道这个概念,能说个皮毛,但是往深了说又不知道怎么说,所以打算对Java从头做一个回顾,算是对自己所学知识的一个巩固和深入了 ...
- K：逆波兰算法
相关介绍: 一种求解字符串形式的表达式的结果的算法,该算法在求解时,需要先将我们平日里习惯上使用的中序表达式的模式转化为等价的后序(后缀)表达式的模式,之后再通过求解出该后序(后缀)表达式的结果而得 ...
- JAVA_吸血鬼数字 多种方法实现
package test4; import java.util.Arrays; /** * 从TIJ中第4章的练习10看到“吸血鬼数字”,以下几种方法实现以及执行时间对比 * 找出四位数的所有吸血鬼数 ...
- HTML是什么与基础格式
html 又称 超文本标记语言. 网页的本质其实就是html代码,通过浏览器,将html转换翻译成用户可以看得懂的展现丰富的页面. 所以制作网站的本质,其实就是编写html代码. HTML基础格式 & ...
- Django之ModelForm使用
一:什么是ModelForm呢? Model + Form ==> ModelForm.model和form的结合体,所以有以下功能: 数据验证 数据库操作 model有操作数据库的字段,for ...
- Search Insert Position 查找给定元素在数组中的位置，若没有则返回应该在的位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- 辅助判卷程序的一些小bug
首先谈一下,double类型 之前查过一些资料,double类型做==(相等)判断时候,会出现一些错误,及61.95与61.95不相等 对main函数中的部分加以改正,下面的answer为string ...
- 常规操作系统Windows系统淋雨系统Unix系统netware等系统介绍分析
服务器操作系统有有很多,比如说:Windows.Linux.Unix和Netware......但我们经常用过仅有Windows和Linux.下面简单为大家介绍一下常见服务器操作系统. 1.Windo ...