用js写进度条

最新推荐文章于 2024-05-02 09:34:08 发布

冬瓜那个西瓜

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量206

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_50471372/article/details/115677496

版权

HTML CSS JavaScript 进度条动态更新

关键词由CSDN通过智能技术生成

HTML

 <div id="progress">
        <!-- 进度条 -->
        <div id="filldiv"></div>
        <!-- 百分比 -->
        <span id="percent"></span>
    </div>

CSS

 <style>
        #progress {
            position: relative;
            margin: auto;
            top: 200px;
            display: block;
            width: 800px;
            height: 40px;
            border-style: solid;
            border-width: 2px;
            border-color: rgb(189, 58, 123);

        }

        #filldiv {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0px;
            height: 40px;
            /* background: blue; */
            background: -webkit-linear-gradient(right, rgb(49, 143, 180), rgb(142, 230, 134));
        }
        #percent {
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 32px;
        }
    </style>

<script>
        var oprogress = document.getElementById('progress')
        var fillDiv = document.getElementById('filldiv');
        var perCent = document.getElementById('percent');
        // 计数器
        var count = 0;
        //定时器
        var time = setInterval(function () {
            // 每几毫秒加一
            count++;
            perCent.innerHTML = count + '%';
            fillDiv.style.width = oprogress.clientWidth / 100 * count + 'px';
            // 清除定时器
            if (count == 100) {
                clearInterval(time)
            }
        }, 100)
    </script>