js动画库

2021-07-03 20:31:39 作者：互联网

1、简单的匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
        padding : 0;
        margin : 0
        }
        button{
            width : 80px;
            height : 40px
        }
        #box{
            width:200px;
            height:200px;
            background-color:pink;
            position:absolute;
            top:50px
        }
    </style>
</head>
<body>
        <button id="btn">动画</button>
        <div id="box"></div>
        <script type="text/javascript">
        // 问题：1、边界  2、定时器的管理
            var btn = document.geElementById("btn");
            var box = document.getElementById("box")
            var timer = null;
            btn.onclick = function() {
                // 先关闭之前的定时器，防止定时器累加，导致速度加快
                clearInterval(timer);
                timer = setInterval(function () {
                    // num++;
                    if(box.offsetLeft === 500){
                        clearInterval(timer);
                        // 解决代码继续往下走
                        return
                    }
                    box.style.left = box.offsetLeft + 10 + 'px'
                },30)
            }
        </script>
</body>
</html>

标签：box,动画,定时器,clearInterval,timer,js,var,btn
来源： https://www.cnblogs.com/nielifang/p/14967463.html