超好玩的推盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #div1{
            width: 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>
超好玩的推盒子

推荐阅读
