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 ...
随机推荐
- mysql分表，批量生成数据
一.mysql的分表策略 根据经验,Mysql表数据一般达到百万级别,查询效率会很低,容易造成表锁,甚至堆积很多连接,直接挂掉: 1,水平分割: 水平(横向)拆分:将同一个表的数据进行分块保存到不同的 ...
- 内嵌Jetty输出debug日志
Slf4jLog logger = new Slf4jLog(); logger.setDebugEnabled(true); Log.setLog(logger); log4j2.xml中配置如下章 ...
- 【SSH网上商城项目实战10】商品类基本模块的搭建
转自:https://blog.csdn.net/eson_15/article/details/51354932 前面我们完成了与商品类别相关的业务逻辑,接下来我们开始做具体商品部分. 1. 数据库 ...
- C# 注释&SQL注释
SQL注释: 1.单行注释:--单行注释 2.多行注释:/*多行 注释*/ C#注释: 1.单行注释://单行注释 2.多行注释:/*多行 注释*/ 3.说明注释:///<summary> ...
- 【转载】python实例手册
今天写爬虫的时候遇到了问题,在网上不停地查找资料,居然碰到两篇好文章: 1.python实例手册 作者:没头脑的土豆 另一篇在这:shell实例手册 python实例手册 #encoding:ut ...
- 【python基础】之str类字符串
str类字符串是不可变对象 1.创建字符串 s1 = str() #创建一个空字符串 s2 = str("hello") #创建字符串"hello" 2.处理字 ...
- ArcGISPlotSilverlightAPI For WPF
这两天有个需求,在地图上做标绘箭头,效果如下图. Arcgis for WPF 10.2.5.0版本,然而官方文档中没有这种API,自己去写一个呢,又感觉无从下手.无奈去网上搜索了一下,发现一篇好文: ...
- linux shell实现守护进程 看门狗 脚本
嵌入式初学者,第一次上传代码.昨天做了一个udhcpd与udhcpc的守护,目前只会用shell模仿编写,还有什么方法可以做守护呢? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
- 自创open vp n windows步骤
Easy Windows Guide¶ This page contains a no-frills guide to getting OpenVPN up and running on a Wind ...
- 编码学习---代码OJ网站
代码OJ网站: https://leetcode-cn.com/accounts/login/