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 ...
随机推荐
- java核心技术-内部类
高级类特性-(类的成员之一:内部类) 内的成员之一:内部类(属性.方法.构造器.代码块) 可以有四种权限访问修饰符 注意:外部类 只有两种 public 和 default 定义 : 可以将一个类的定 ...
- Groovy中的操作符重载
操作者 方法 a + b a.plus(b)中 a - b a.minus(b)中 a * b a.multiply(b)中 a ** b a.power(b)中 a / b a.div(b)中 a ...
- 认识Groovy
什么是groovy: Groovy 是 JVM 的一个替代语言 —替代 是指可以用 Groovy 在 Java 平台上进行 Java 编程,使用方式基本与使用 Java 代码的方式相同. 在编写新应用 ...
- JSP简单实现登录和注销
JSP简单实现登录和注销 需求:用户登录成功后跳转到欢迎页面 用户登录失败跳转到初始的登录界面 用户点击注销,用户退出登录状态需要重新登录 登录页面的JSP代码: <%@ page langua ...
- C#学习笔记-外观模式
题目:股民买卖股票 实现: static void Main(string[] args) { Stock1 gu1 = new Stock1(); Stock2 gu2 = new Stock2() ...
- For循环中由于ajax异步导致的问题解决（增加alert数据正常，去掉alert之后数据错误）
由于ajax异步请求的机制,for循环运行不会等内部ajax请求结束,而直接循环到最后.解决方法:将for循环里面的请求单独封装一个方法. 个人遇到的问题具体如下 下面这段代码,如果第5行studat ...
- Java 并发：线程中断-interrupt
一直以为执行了interrupt方法就可以让线程结束,并抛出InterruptedException. 今天看了Java并发编程实战的第七章发现并不是这么回事,在这章的开头就提到 要使任务和线程能安全 ...
- bzoj P3884 上帝与集合的正确用法
Description 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“ ...
- 微信开发 获取AccessToken
获取AccessToken的方法 public static Access_token GetAccessToken() { string formatString = String.Format(& ...
- TensorFlow-卷积
卷积: conv2d ( input, filter, strides, padding, use_cudnn_on_gpu=True, data_format='NHWC', name=No ...