zoukankan      html  css  js  c++  java
  • 键盘控制平滑运动

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>键盘控制平滑运动</title>
     6     <style type="text/css">
     7         .div {
     8             width: 100px;
     9             height: 100px;
    10             background-color: pink;
    11             position: absolute;
    12             top: 0;
    13             left: 100px;
    14         }
    15     </style>
    16 </head>
    17 <body>
    18     <div class="div"></div>
    19 </body>
    20 <script type="text/javascript">
    21     var div = document.querySelector('.div')
    22     var l_able = false;
    23     var r_able = false;
    24     var t_able = false;
    25     var b_able = false;
    26     setInterval(function () {
    27         if (l_able) {
    28             div.style.left = div.offsetLeft - 3 + 'px';
    29         };
    30         r_able && (div.style.left = div.offsetLeft + 3 + 'px')
    31         t_able && (div.style.top = div.offsetTop - 3 + 'px')
    32         b_able && (div.style.top = div.offsetTop + 3 + 'px')
    33         
    34     }, 16);
    35     document.onkeydown = function (ev) {
    36         switch(ev.keyCode) {
    37             case 37: l_able = true;break;
    38             case 39: r_able = true;break;
    39             case 38: t_able = true;break;
    40             case 40: b_able = true;break;
    41         };
    42     };
    43     document.onkeyup = function (ev) {
    44         switch(ev.keyCode) {
    45             case 37: l_able = false;break;
    46             case 39: r_able = false;break;
    47             case 38: t_able = false;break;
    48             case 40: b_able = false;break;
    49         };
    50     };
    51 </script>
    52 </html>
  • 相关阅读:
    2020-11-15(第十一周)助教周小结
    2020-11-08(第十周)助教周小结
    2020-11-01助教周小结(第九周)
    Template.
    OO第四单元总结
    OO第三单元总结
    OO第二单元总结
    OO第一单元总结
    AFO
    Codeforces Round #424 (Div. 2)
  • 原文地址:https://www.cnblogs.com/xuqidong/p/12113057.html
Copyright © 2011-2022 走看看