滚动的滑块来回

最新推荐文章于 2022-11-24 18:02:58 发布

吴机智

最新推荐文章于 2022-11-24 18:02:58 发布

阅读量71

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108502943

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0.1px;
        }
    </style>
</head>

<body>
    <button>向前移动</button>
    <button>向后移动</button>
    <div></div>
    <script src="./ujiuye.js"></script>
    <script>
        // 效果: 点击按钮，让块从0的位置移动到1000的位置并停止
        // 获取元素
        var btn = document.getElementsByTagName('button');
        var div = document.getElementsByTagName('div')[0];
        console.log(btn, div);
        var timer = null;
        // 点击按钮
        btn[0].onclick = function () {
            // 每隔20ms移动一次, 基于当前位置+10
            // 定时器的叠加
            // 每次点击的时候先清除上一次的定时器
            clearInterval(timer);
            timer = setInterval(function () {
                // 当前位置
                var l = parseFloat(getStyle(div, 'left')) + 10;
                console.log(l);
                // 判断, 判断当前l是否大于等于1000, 需要清除定时器
                if(l >= 1000){
                    l = 1000;
                    clearInterval(timer);
                }
                // 将l赋值给div的left
                div.style.left = l + 'px';
            }, 20);
        }

        // 点击向后移动按钮, 让div从1000的位置回到0
        btn[1].onclick = function(){
            clearInterval(timer);
            timer = setInterval(function () {
                // 当前位置
                var l = parseFloat(getStyle(div, 'left')) - 10;
                console.log(l);
                // 判断, 判断当前l是否大于等于1000, 需要清除定时器
                if(l >= 1000){
                    l = 1000;
                    clearInterval(timer);
                }
                if(l <= 0){
                    l = 0;
                    clearInterval(timer);
                }
                // 将l赋值给div的left
                div.style.left = l + 'px';
            }, 20);
        }
    </script>
</body>

</html>