通过定时器去改变进度条宽度（进度条问题）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
    
    
            width: 800px;
            height: 20px;
            border-radius: 4px;
            margin: 100px auto;
            border: 2px solid green;
            position: relative;
        }

        #jinDuTiao {
    
    
            height: 20px;
            background: orange;
            border-radius: 4px;
            float: left;
        }

        #num {
    
    
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="jinDuTiao" style="width: 0px;"></div>
        <span id="num">0%</span>
    </div>
    <script>
        /*
            需用通过定时器 去改变 进度条宽度
            在js中需要实现动画，就必须使用定时器
        */

        var timer = setInterval(function () {
    
    
            // 每执行一次定时器 进度条在原来的宽度基础上 + 10
            // 获取 原来的宽度  jinDuTiao.style.width 得到是 '0px' 只想0数字
            var style = parseInt(jinDuTiao.style.width);

            // 定义一个变量用原来的值 +每次增加的值
            var curStyle = style + 13;

            // 当进度条的宽度为 800的时候，已经是 最大值
            if (curStyle >= 800) {
    
    
                // 当值大于800 的时候，直接让curStyle的  等于800
                curStyle = 800;

                // 当执行这个条件时候，进度条已经达到100%
                // 定时器不需要在执行
                // 清除定时器   this指向的w`在这里插入代码片`indow
                clearInterval(timer)
            }
            // 在原来的基础上 + 10,在赋值给 元素的 宽度
            jinDuTiao.style.width = curStyle + 'px';

            // 给数字的元素添加left ，根据进度条的变化 而变化
            num.style.left = curStyle + 2 + 'px';
            // toFixed(2) 表示保留两位小数点
            num.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
        }, 100)
    </script>
</body>

</html>
通过定时器去改变进度条宽度（进度条问题）

猜你喜欢
