JavaScript进度条

最新推荐文章于 2023-04-01 22:49:01 发布

H-哈哈哈哈

最新推荐文章于 2023-04-01 22:49:01 发布

阅读量300

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Hocen_Jonin/article/details/72830097

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>进度条</title>
    <style type="text/css">
        .loadbar{
            width:450px;
            background:#c6dcfa;
            height:20px;
            border-radius:10px ;
        }
        #bar{
            background:#4d8ef0;
            float:left;
            height: 20px;
            text-align:center;
            border-radius:10px ;
            font-family: arial;
            color: #FFFFFF;
            font-size: 14px;
            line-height: 20px;
        }
    </style>
    <script type="text/javascript">
        function setProcess(){
            var processbar = document.getElementById("bar");
            processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
            processbar.innerHTML = processbar.style.width;
            if(processbar.style.width == "30%"){
                window.clearInterval(bartimer);
            }
        }
        var bartimer = window.setInterval(function(){setProcess();},50);
        window.onload = function(){
            bartimer;
        }
    </script>
</head>
<body>
<div class="loadbar">
    <div id="bar" style="width:0%;"></div>
</div>
</body>
</html>

H-哈哈哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进度条

html>head> title>进度条title> style type="text/css"> .loadbar{ width:450px; background:#c6dcfa; height:20px; border-radius:10px ;
复制链接

扫一扫