简单实现一个进度条

Chestnut*

于 2021-01-05 16:05:52 发布

阅读量266

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_43830188/article/details/112240564

版权

js 专栏收录该内容

15 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单实现进度条</title>
    <style>
        #hd {
            height: 30px;
            width: 500px;
        }

        .progress {
            line-height: 30px;
            text-align: center;
            width: 0%;
            background: yellowgreen;
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div id="hd">
        <p class="progress"></p>
    </div>
    <script>
        var hd = document.querySelector('.progress');

        function handle() {
            let i = 0;
            (function sun() {
                hd.innerHTML = i + '%';
                hd.style.width = i + '%';
                if (++i <= 100) {
                    setTimeout(sun, 50)
                }
            })()
        };

        handle()
    </script>
</body>

</html>