鍵盤 控制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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容