zoukankan      html  css  js  c++  java
  • 超好玩的推盒子

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    padding: 0;
    margin: 0;
    }
    #div1{
    100px;
    height: 100px;
    background: orange;
    position: relative;
    }
    </style>
    </head>
    <body>
    <div id="div1">推推推</div>
    </body>
    </html>
    <script src="utils.js"></script>
    <script>
    /*var n =12;
    switch (n){
    case 1:
    console.log(1);
    break;
    case 2:
    console.log(2);
    break;
    default:
    console.log(3);
    };*/
    var oDiv = document.getElementById('div1');
    document.onkeydown = function (e) {
    e = e || window.event;
    console.log(e.keyCode);// 记录的是键盘对应的键值码
    var l = oDiv.style;
    // var l2 = oDiv.style.left;
    switch (e.keyCode){
    case 37:
    l.left = utils.css(oDiv,'left') - 10 + 'px';
    break;
    case 38:
    l.top = utils.css(oDiv,'top') - 10 + 'px';
    break;
    case 39:
    l.left = utils.css(oDiv,'left') + 10 + 'px';
    break;
    case 40:
    l.top = utils.css(oDiv,'top') + 10 + 'px';
    break;
    }
    }

    </script>
  • 相关阅读:
    Scramble String
    Burst Balloons
    Coins in a Line III
    maven初识
    Java类加载器初识
    HTTP协议
    Map和Set的联系
    Thread类与Runnable接口
    Throwable和Exception的区别
    SpringMVC的@ResponseBody注解简介
  • 原文地址:https://www.cnblogs.com/zhangyongxi/p/9683260.html
Copyright © 2011-2022 走看看