js 键盘点击事件

回车键(Enter)的触发事件  js 代码如下：

document.onkeydown = function (e) {
    if (!e) e = window.event;
    if ((e.keyCode || e.which) == 13) {
        alert("触发了enter回车键！");
    }
}

键盘事件顺便做下测试demo：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>键盘事件测试</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         body,html{
 12             width: 100%;
 13             height: 100%;
 14             position: relative;
 15         }
 16         .img{
 17             width: 32px;
 18             height: 32px;
 19             position: absolute;
 20         }
 21     </style>
 22 </head>
 23 <body>
 24     <img src="img/right.png" alt="" class="img" id="img">
 25     <script>
 26         window.onload = function(){
 27             var ismove = "";
 28             var img = document.getElementsByClassName("img")[0];
 29             var width = getWidth();
 30             var height = getHeight();
 31             document.onkeydown = function(e){
 32                 e = e || event;
 33                 // console.log(e.keyCode) //获取键盘编码
 34                 if(e.keyCode == 37 || e.keyCode == 65){
 35                     ismove = "left";
 36                 }
 37                 else if(e.keyCode == 38 || e.keyCode == 87){
 38                     ismove = "top";
 39                 }
 40                 else if(e.keyCode == 39 || e.keyCode == 68){
 41                     ismove = "right";
 42                 }
 43                 else if(e.keyCode == 40 || e.keyCode == 83){
 44                     ismove = "bottom";
 45                 }
 46             }
 47             document.onkeyup = function(){
 48                 ismove = "";
 49             }
 50             var timer = setInterval(function(){
 51                 switch(ismove){
 52                     case "left":
 53                         img.style.left = img.offsetLeft - 3 +"px";
 54                         img.src = "img/left.png";
 55                         break;
 56                     case "right":
 57                         img.style.left = img.offsetLeft + 3 +"px";
 58                         img.src = "img/right.png";
 59                         break;    
 60                     case "top":
 61                         img.style.top = img.offsetTop - 3 +"px";
 62                         img.src = "img/top.png";
 63                         break;
 64                     case "bottom":
 65                         img.style.top = img.offsetTop + 3 +"px";
 66                         img.src = "img/down.png";
 67                         break;            
 68                 }
 69                 if(img.offsetLeft<=0){
 70                     img.style.left = "0px"
 71                 }
 72                 if(img.offsetTop<=0){
 73                     img.style.top = "0px"
 74                 }
 75                 if(img.offsetLeft>=width - img.offsetWidth){
 76                     img.style.left = width - img.offsetWidth + "px"
 77                 }
 78                 if(img.offsetTop>=height - img.offsetHeight){
 79                     img.style.top = height - img.offsetHeight + "px"
 80                 }
 81             }, 10);
 82             // 获取页面可视区宽高  兼容所有浏览器 （简写）
 83             function getWidth(){
 84                 return window.innerWidth || document.compatMode == CSS1Compat ? document.documentElement.clientWidth : document.body.clientWidth;
 85             }
 86             function getHeight(){
 87                 return window.innerHeight || document.compatMode == CSS1Compat ? document.documentElement.clientHeight : document.body.clientHeight;
 88             }
 89             // 获取页面可视区宽高  兼容所有浏览器
 90             // function getWidth(){
 91             //     if(window.innerWidth){
 92             //         return window.innerWidth;
 93             //     }
 94             //     else{
 95             //         if(document.compatMode == "CSS1Compat"){
 96             //             return document.documentElement.clientWidth;
 97             //         }
 98             //         else{
 99             //             return document.body.clientWidth;
100             //         }
101             //     }
102             // }
103             // function getHeight(){
104             //     if(window.innerHeight){
105             //         return window.innerHeight;
106             //     }
107             //     else{
108             //         if(document.compatMode == "CSS1Compat"){
109             //             return document.documentElement.clientHeight;
110             //         }
111             //         else{
112             //             return document.body.clientHeight;
113             //         }
114             //     }
115             // }
116         }
117     </script>
118 </body>
119 </html>

四个小坦克图片如下;

 

posted @ 2017-11-16 17:53  我要成为酷酷的人  阅读(1001)  评论(0)  编辑  收藏  举报