智能社JavaScript学习笔记——JS运动基础

最新推荐文章于 2021-08-25 09:16:03 发布

namei33

最新推荐文章于 2021-08-25 09:16:03 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/namei33/article/details/46421399

版权

本文详细介绍了JavaScript中让元素运动的基础知识，包括匀速运动、运动框架的建立及其应用，以及缓冲运动的概念和实现。通过实例解析了运动过程中的常见问题，如运动停止、速度控制和缓冲效果，帮助读者深入理解JavaScript动画的实现机制。

摘要由CSDN通过智能技术生成

1. 运动基础

让Div运动起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
    width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
    </style>
    <script>
    function startMove() 
    {
    
        var oDiv = document.getElementById("div1");

        setInterval(function(){
    
            var speed = 10;
            oDiv.style.left = oDiv.offsetLeft + speed + 'px';

        }, 30);
    }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="开始移动" onclick="startMove()" />
    <div id="div1"></div>
</body>
</html>

速度——物体运动的快慢
修改speed的值，越大运动越快

运动中的Bug

不会停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
    width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
    </style>
    <script>
    var timer = null;
    function startMove() 
    {
    
        var oDiv = document.getElementById("div1");

        timer = setInterval(function(){
    
            var speed = 10;
            if(oDiv.offsetLeft == 300)
            {
                clearInterval(timer);
            }
            oDiv.style.left = oDiv.offsetLeft + speed + 'px';

        }, 30);
    }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="开始移动" onclick="startMove()" />
    <div id="div1"></div>
</body>
</html>

速度取某些值会无法停止
比如，当speed=7时，将无法停止，因为oDiv.style.left的值：0，7，14，。。。，280，287，294，301，308，，，。所以offsetLeft的值不会等于300，也就不会停止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
    width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
    </style>
    <script>
    var timer = null;
    function startMove() 
    {
    
        var oDiv = document.getElementById("div1");

        timer = setInterval(function(){
    
            var speed = 10;
            if(oDiv.offsetLeft >= 300) // 改为>=
            {
                clearInterval(timer);
            }
            oDiv.style.left = oDiv.offsetLeft + speed + 'px';

        }, 30);
    }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="开始移动" onclick="startMove()" />
    <div id="div1"></div>
</body>
</html>

到达位置后再点击还会运动
当div停住以后，点击按钮后div还会动一下，这是因为定时器要到下一次才会关闭，但当前的oDiv.style.left = oDiv.offsetLeft + speed + ‘px’;还是会执行一次。
解决办法：将该语句放到else里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
    width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
    </style>
    <script>
    var timer = null;
    function startMove() 
    {
    
        var oDiv = document.getElementById("div1");

        timer = setInterval(function(){
    
            var speed = 10;
            if(oDiv.offsetLeft >= 300)
            {
                clearInterval(timer);
            }
            else
            {
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';
            }

        }, 30);
    }