键盘控制div 移动

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
    width:100px;
    height:150px;
    background: red;
    position: absolute;
    }
</style>
<script>
    var timer=null;
    document.onkeydown=function (ev) {

        /*先得到上下左右的keyCode值
    alert(oEvent.keyCode);*/
    /*offsetLeft就是DIV的实际距离*/
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');

    //必须加上这句，因为如果按着某个键不放，它其实会不断地执行onkeydown这个事件
    //如果不加的话，就会产生很多个定时器，使得div的速度越来越快
            clearInterval(timer);
        timer=setInterval(function(){
            if(oEvent.keyCode==37)    //思考：怎么才能不卡
            {
                oDiv.style.left=oDiv.offsetLeft-10+'px';
            }
            else if(oEvent.keyCode==39)
            {
                oDiv.style.left=oDiv.offsetLeft+10+'px';
            }
        },30);

    };
    //键盘抬起事件
    document.onkeyup=function()
    {
        clearInterval(timer);
    };
</script>

<body >

<div id="div1"></div>

</body>
</html>
最后编辑于：2017.12.11 02:21:19
键盘 控制div 移动

推荐阅读更多精彩内容

键盘控制div 移动
