通过定时器去改变进度条宽度(进度条问题)

练习 专栏收录该内容
5 篇文章 0 订阅
<!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>
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值