键盘移动div样例

来源：互联网发布：仓库管理php源码编辑：程序博客网时间：2024/06/09 14:07
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>键盘移动div</title>    <style type="text/css">        *{margin:0px;padding:0px;}        #move{width:200px;height:200px;background:orange;font-family:microsoft yahei;position:absolute;top:200px;}    </style> </head><body>    <div id="move"></div>    <script type="text/javascript">    var step = 10;//我的世界    var move = document.getElementById('move');    var inte = null;//定时器变量     window.onkeypress = function(e){        var c = e.keyCode;        //检测按键信息        switch(c){            case 37:                moveLeft();                break;            case 38:                moveUp();                break;            case 39:                moveRight();                break;            case 40:                moveDown();                break;        }    }     window.onkeyup = function(){        //清空定时器        clearInterval(inte);        inte = null;    }     //向左移动函数封装    function moveLeft(){        if(inte != null) return ;        inte = setInterval(function(){            //获取当前元素的left值            var l = move.offsetLeft;            //计算新的left            var newLeft = l - step;            //设置细腻的left值            move.style.left = newLeft + 'px';        },10)     }     //向右移动    function moveRight(){        //判断当前页面是否有定时器        if(inte != null) return ;        inte = setInterval(function(){            //获取当前元素的left值            var l = move.offsetLeft;            //计算新的left            var newLeft = l + step;            //设置细腻的left值            move.style.left = newLeft + 'px';        },10)     }      //向上    function moveUp(){        //        var t = move.offsetTop;        var newT = t - step;        move.style.top = newT + 'px';    }     //向下    function moveDown(){        var t = move.offsetTop;        var newT = t + step;        move.style.top = newT + 'px';    }      </script></body></html>
0 0