javascript#js#利用键盘控制盒子/图片移动（定时器setInterval()和键盘onkeydown()的应用）

键盘上下左右控制图片移动

思路：

为了避免物体移动时，第一下和第二下之间的间隔卡顿，将控制物体移动的速度和方向分开

方向：用 setInterval()函数包含switch语句，setInterval()函数每隔一段时间检查该执行哪一个，避免停顿

速度：用onkeydown()函数，利用ctrlkey属性，每按下一次ctrl则会加速一次

注意：图片盒子记得设置 position:absolution;否则不能成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1{
            width: 200px;
            height: 200px;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var img=document.getElementsByTagName("img")[0];
            var box1=document.getElementById("box1");
            var speed=10;
            var dir;
            //开始一个定时器控制dib移动
            setInterval(function(){

                switch(dir){
                    case 37:
                        box1.style.left=box1.offsetLeft-speed+"px";break;
                    case 38:
                       box1.style.top=box1.offsetTop-speed+"px";break;
                    case 39:
                        box1.style.left=box1.offsetLeft+speed+"px";break;
                    case 40:
                        box1.style.top=box1.offsetTop+speed+"px";break;
                }

            },60);

            document.onkeydown=function(event){
                event=event||window.event;
                dir=event.keyCode; 
                if(event.ctrlKey){
                    speed+=10;
                }
            };
            document.onkeyup=function(){
                event=event||window.event;
                dir=0;
            };
 

            };
  
            
        
    </script>
</head>
<body>
    <div id="box1">
        <img src="images/baby.png" alt="">
    </div>
</body>
</html>

javascript#js#利用键盘控制盒子/图片移动（定时器setInterval()和键盘onkeydown()的应用）

猜你喜欢