zoukankan      html  css  js  c++  java
  • 键盘事件练习——移动的方块

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
            </style>
        </head>
    
        <body style="position: relative;">
            <div id="box" style=" 100px;height: 100px;background-color: sandybrown;position: absolute;">
    
            </div>
            <script type="text/javascript">

    /*获取浏览器的最大化尺寸*/ var wi = document.documentElement.clientWidth - 100; //取得浏览器页面可视区域的宽度,(并且需要减去 方块的宽度) var hi = document.documentElement.clientHeight - 100; //取得浏览器页面可视区域的高度,(并且需要减去 方块的高度) var box = document.getElementById("box") document.addEventListener("keydown", function(e) { var l = parseInt(window.getComputedStyle(box, null).left); //获取方块坐标 var t = parseInt(window.getComputedStyle(box, null).top); console.log(l, t) var event = e || window.event if(event.key == "w" & t > 0) { box.style.top = t - 10 + "px"; }; if(event.key == "s" & t < hi) { box.style.top = t + 10 + "px"; }; if(event.key == "a" & l > 0) { box.style.left = l - 10 + "px"; }; if(event.key == "d" & l < wi) { box.style.left = l + 10 + "px"; }; }, false) </script> </body> </html>
  • 相关阅读:
    8P
    8N
    8M
    8K
    jenkins在Mac系统中默认日志、配置、启动等文件的路径
    解决Jenkins报Error fetching remote repo 'origin'的办法
    selenium的Web自动化元素点击时仍需要time.sleep等待1秒的问题
    详细配置j enokis
    mac配置启动tomcat
    mac配置启动tomcat
  • 原文地址:https://www.cnblogs.com/botoo/p/12263244.html
Copyright © 2011-2022 走看看