JavaScript-定时器解决卡顿问题- 键盘控制移动div

demo: 用键盘上下左右键子,控制div 上下左右移动。 不加定时器的时候会感觉移动的时候有卡顿现象, 可以通过定时器来解决。

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>

<body>
   <div id="test">
   </div>
    <script>
        window.onload = function () {
            var test=document.getElementById("test");
            var speed=10; //速度
            var dir=0;   //方向, 左上右下  分别是37 38 39 40
            var moveTimer;
            //定时器,控制div移动速度
            moveTimer=setInterval(function(){
                switch(dir){
                   case 37:
                   test.style.left=test.offsetLeft-speed+"px";
                   break;
                   case 38:
                   test.style.top=test.offsetTop-speed+"px";
                   break;
                   case 39:
                   test.style.left=test.offsetLeft+speed+"px";
                   break;
                   case 40:
                   test.style.top=test.offsetTop+speed+"px";
                   break;
               }
            },30)
            document.onkeydown=function(e){
                dir=e.keyCode;
            }
            document.onkeyup=function(){
               dir=0;
            }
        }
    </script>
</body>

</html>

你可能感兴趣的:(JavaScript)