【HTML+CSS+JavaScript】实现进度条功能

最新推荐文章于 2023-05-14 18:42:44 发布

weixin_30624825

最新推荐文章于 2023-05-14 18:42:44 发布

阅读量291

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/neymargoal/p/9470734.html

版权

需求：实现进度条功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进度条</title>
    <style type="text/css">
        .outter {
            margin:200px auto 0px;
            width: 600px;
            height: 40px;
            border: 1px solid pink;
        }
        .inner {
            height: 40px;
            width: 0%;
            background: pink;
        }
        .process {
            margin-top:2px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>

    <div class="process"></div>


    <script type="text/javascript">
        var innerEle = document.querySelector('.inner');
        var proEle = document.querySelector('.process');

        var m = 0;

        var timer = setInterval(function(){
            innerEle.style.width = m+'%';
            proEle.innerHTML = m+'%';

            if (m >= 100) {
                clearInterval(timer);
                return;
            }
            m += 1;
        },100)


    </script>
</body>
</html>

转载于:https://www.cnblogs.com/neymargoal/p/9470734.html

weixin_30624825

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS+JavaScript】实现进度条功能

需求：实现进度条功能<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>进度条</title> <style type="text/css"> .outter { ...
复制链接

扫一扫