zoukankan      html  css  js  c++  java
  • 消除键盘事件的短暂延迟

    这个不用多说,直接贴代码,

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>键盘事件延迟</title>
     6         <style type="text/css">
     7             #div{
     8                  100px;
     9                 height: 100px;
    10                 background-color: greenyellow;
    11                 position: absolute;
    12             }
    13         </style>
    14     </head>
    15     <body>
    16         <div id="div"></div>
    17     </body>
    18     <script type="text/javascript">
    19     window.onload=function(){
    20         
    21     
    22         var div=document.getElementById("div");
    23         var offsetx=div.offsetLeft;
    24         var offsety=div.offsetTop;
    25         var left=false;
    26         var right=false;
    27         var top=false;
    28         var bottom=false;
    29         //这里采用计时器消除键盘事件的延迟问题,可直接贴码验证一下
    30         setInterval(function() {
    31             if (left) {
    32                 offsetx-=10;
    33                 div.style.left=offsetx+"px";
    34             }else if (right) {
    35                 offsetx+=10;
    36                 div.style.left=offsetx+"px";
    37             }else if (top) {
    38                 offsety-=10;
    39                 div.style.top=offsety+"px";
    40             }else if (bottom) {
    41                 offsety+=10;
    42                 div.style.top=offsety+"px";
    43             }
    44         },50)
    45         document.onkeydown=function(event){
    46             switch (event.keyCode){
    47                 case 37:
    48                 left=true;
    49                     break;
    50                 case 38:
    51                 top=true;
    52                     break;
    53                 case 39:
    54                 right=true;
    55                     break;
    56                 case 40:
    57                 bottom=true;
    58                     break;
    59                 default:
    60                     break;
    61             }
    62         }
    63         document.onkeyup=function(event){
    64             switch (event.keyCode){
    65                 case 37:
    66                 left=false;
    67                     break;
    68                 case 38:
    69                 top=false;
    70                     break;
    71                 case 39:
    72                 right=false;
    73                     break;
    74                 case 40:
    75                 bottom=false;
    76                     break;
    77                 default:
    78                     break;
    79             }
    80             
    81         }
    82     }
    83     </script>
    84 </html>

    代码不多,希望对需要的人有帮助...

  • 相关阅读:
    Live Writer配置
    protobufnet 学习手记
    好的Sql语句也能提高效率(二)
    关于CodeSmith的输出问题
    [Scrum]12.29
    [scrum] 1.4
    分享 关于c#注释的规范
    [Scrum] 1.3
    分享:将XML(VS提取注释时生成)转换为Chm的一个方法
    【Scrum】2010.12.27
  • 原文地址:https://www.cnblogs.com/hanhui66/p/6005253.html
Copyright © 2011-2022 走看看