回车键(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 键盘点击事件的更多相关文章

  1. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  2. JS通过键盘点击事件实现div移动

    页面内容:文本框模拟键盘点击   div元素实现移动: <body> <textarea id="myarea"></textarea> < ...

  3. jquery/js记录点击事件，单击次数加一，双击清零

    目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...

  4. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...

  5. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  6. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

  7. JS——按钮点击事件累加注册问题

    最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...

  8. js阻止点击事件的冒泡的实现

    <html> <head> <script type="text/javascript"> function fnclick1(){ alert ...

  9. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

随机推荐

  1. github flow

    github flow Github flow 是Git flow的简化版,专门配合"持续发布".它是 Github.com 使用的工作流程 它只有一个长期分支,就是master, ...

  2. 分析解决 spring quartz 中出现的执行两次问题

    1. 问题描述 在开发询盘功能时,遇到一个需求,就是后台定时任务执行用电施工业务的工单下发. 使用的技术是 spring quartz,因为其他应用有先例,配置quartz 完成后,先写了一个 hel ...

  3. golang label breaks

    我们在for多层嵌套时,有时候需要直接跳出所有嵌套循环, 这时候就可以用到go的label breaks特征了. 先看一个范例代码: package main import (     "f ...

  4. Hadoop worldcount

    以前的公司和现在的公司,都用到了hadoop和hdfs.一直没入门,今天照着官网写了一个hadoop worldcount demo 1. hadoop是一个框架,什么是框架,spring是一个框架. ...

  5. Q：接口与抽象类

    博文回答一下两个问题: 接口和抽象类的区别 选用接口和抽象类的依据 对于问题1: 从java语法的角度上来说,接口的所有成员和方法都是public的,且其方法均为abstract的.直到jdk1.8之 ...

  6. CentOS6下docker的安装和使用

    CentOS6下docker的安装和使用 Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS.Go语言.cgroup ...

  7. BZOJ3529: [Sdoi2014]数表(莫比乌斯反演 树状数组)

    题意 题目链接 Sol 首先不考虑\(a\)的限制 我们要求的是 \[\sum_{i = 1}^n \sum_{j = 1}^m \sigma(gcd(i, j))\] 用常规的套路可以化到这个形式 ...

  8. JS计算十万块钱 分31期 利息万分之五 每个月的还款数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue2.0路由写法

    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件. // 可以从其他文件 import 进来 var Fo ...

  10. Totem协议（SRP/RRP）讲解

    基本概念 •SRP:  The Totem Single-Ring Ordering and MembershipProtocol            –基于以太网的组通信协议,节点间组成单环结构 ...