关于DOM操作的案例进度条

江南1232

已于 2022-10-24 20:41:15 修改

阅读量133

点赞数

分类专栏： DOM操作文章标签： 1024程序员节

于 2022-10-24 20:34:05 首次发布

本文链接：https://blog.csdn.net/qq_36378250/article/details/127500489

版权

DOM操作专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.进度条方一

每次开启定时器之前，先停止定时器，然后再开启 - 每次开启之前先停止之前的定时器，可以保证，永远只有一个定时器在同时执行，不会有多个定时器同时执行，最终使用dsq停止定时器的时候，停止的就是唯一的正在执行的定时器

style>
        * {
            margin: 0;
            padding: 0;
        }

        .aaa {
            width: 300px;
            height: 50px;
            border: 2px solid #111;
        }

        .ccc {
            width: 0px;
            height: 50px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="aaa">
        <div class="ccc"></div>
    </div>
    <button class="ks">开始</button>
    <button class="zt">暂停</button>
    <button class="js">继续</button>
    <button class="tz">停止</button>
</body>
<script>
    // 进度条
//获取操作对象
    var a = document.querySelector('.ccc')
    var b = document.querySelector('.aaa')
    var ks = document.querySelector('.ks')
    var zt = document.querySelector('.zt')
    var js = document.querySelector('.js')
    var tz = document.querySelector('.tz')
//设置定时器为空
    var dsq = null
    ks.onclick = function () {
    //获取第二个div的宽度
        var k1 = a.clientWidth
        //如果宽度等于零就执行代码
        if (k1 == 0) {
        //开始停止定时器防止多次点击导致定时器越来越快
            clearInterval(dsq)
            dsq = setInterval(function () {
              //定时器执行每次加二
                k1 += 2
                //当小div的宽度大于或者等于大div的宽度时
                if (k1 >= b.clientWidth) {
                //把大div的宽度赋值给小div
                    k1 = b.clientWidth
                    console.log(11);
                    //然后清除定时器
                    clearInterval(dsq)
                }
                //把值赋值给小div
                a.style.width = k1 + "px"
            }, 50)
        }

    }
    //暂停定时器
    zt.onclick = function () {
        clearInterval(dsq)
    }
    //继续定时器
    js.onclick = function () {
    //开始停止定时器防止多次点击
        clearInterval(dsq)
        //获取当前小div的宽度
        var k1 = a.offsetWidth
        //让它不等于零的时候执行
        if (k1 != 0) {
            dsq = setInterval(function () {
                
                k1 += 2
               //判断是否大于等于打div的宽度
                if (k1 >= b.clientWidth) {
                //如果大于等于就1直接赋值给小div
                    k1 = b.clientWidth
                    console.log(11);
                    clearInterval(dsq)
                }
                //把值赋值给小div
                a.style.width = k1 + "px"
            }, 50)
        }
    }
    //停止：清除定时器并且把小div的宽度赋值为零
    tz.onclick = function () {
        clearInterval(dsq)

        a.style.width = 0

    }
</script>

2.进度条方法二

设置一个开关，每次点击是否执行定时器，取决于开关是否处于可开启状态，如果开关是可开启的，就执行定时器，如果开关是不可开启的，就不执行定时器。开关本来是可开启状态，定时器一旦开始执行了，就将开关改成不可开启状态，当这次定时器停止后，再将开关打开，以便下次执行定时器。

<style>
    .big {
        width: 300px;
        height: 30px;
        border: 1px solid #000;
    }

    .small {
        width: 0;
        height: 30px;
        background-color: hotpink;
    }
</style>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
    <button>开始</button>
    <button>暂停</button>
    <button>继续</button>
    <button>停止</button>
</body>
<script>
    var btns = document.querySelectorAll('button')
    var small = document.querySelector('.small')
    var big = document.querySelector('.big')
    var timer
    var onOff = true
    // 开始
    btns[0].onclick = function () {
        // 先停止定时器
        // clearInterval(timer)

        // 判断是否能执行下面的定时器？判断开关
        if (onOff) { // 如果开关是开启状态，就可以执行定时器
            // 判断small的宽度是否为0
            if (small.clientWidth === 0) {
                // 将开关关上 - 下次点击不执行定时器了
                onOff = false
                // 开始就应该从0开始
                var w = 0
                // 让小div宽度加大产生动画效果
                timer = setInterval(function () {
                    // 获取small的宽
                    // var w = small.clientWidth
                    // 宽度加大
                    w += 1
                    // 对w做最大值的限制
                    if (w >= big.clientWidth) {
                        // 停止定时器
                        clearInterval(timer)
                        // 当定时器停止后 - 打开开关
                        onOff = true
                        // 给w重新赋值
                        w = 300
                    }
                    // 加大后的数字设置给small的width样式
                    small.style.width = w + 'px'
                    // 检查定时器是否停止
                    console.log(w);
                }, 20)
            }

        }
    }
    // 为什么连续点击多次定时器不停止？
    // 点击第一次，创建了一个定时器，赋值给timer
    // 点击第二次，又创建了一个定时器，赋值给timer
    // 其实，此时有两个定时器在同时进行，但是timer变量只有一个 - 代表第二次的定时器
    // 最终使用timer停止定时器，停止的是第二个定时器，第一个定时器没有停止，会一直运行下去 - 造成了我们点击多次，定时器不停了
    // 解决？



    // 暂停
    btns[1].onclick = function () {
        // 停止定时器
        clearInterval(timer)
        // 将开关打开
        onOff = true
    }


    // 继续
    btns[2].onclick = function () {
        // 判断是否能执行下面的定时器？判断开关
        if (onOff) { // 如果开关是开启状态，就可以执行定时器
            // 继续 - small的宽不为0，才能继续
            if (small.clientWidth != 0) {
                // 将开关关上 - 下次点击不执行定时器了
                onOff = false
                // 让小div宽度加大产生动画效果
                timer = setInterval(function () {
                    // 获取small的宽
                    var w = small.clientWidth
                    // 宽度加大
                    w += 1
                    // 对w做最大值的限制
                    if (w >= big.clientWidth) {
                        // 停止定时器
                        clearInterval(timer)
                        // 当定时器停止后 - 打开开关
                        onOff = true
                        // 给w重新赋值
                        w = 300
                    }
                    // 加大后的数字设置给small的width样式
                    small.style.width = w + 'px'
                    // 检查定时器是否停止
                    console.log(w);
                }, 20)
            }

        }
    }


    // 停止
    btns[3].onclick = function () {
        // 停止定时器
        clearInterval(timer)
        // 将开关打开
        onOff = true
        // 将small的宽度设置为0
        small.style.width = 0
    }
</script>