js进度条（伪）

Posted 风火林山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js进度条（伪）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .c{width: 700px;height: 90px;margin: 0 auto;}
        .c1 #t1{color: #999999;background-color: black;width: 835px;height: 50px;font-size: 50px;line-height: 50;}
    </style>
    <script>
        var M="";
        var ID=0;
        var SD;
        window.onload=function () {
          cl()
        };
        function pre() {
            var ele=document.getElementById("t1");
            ele.value=M+ID+"%";
            ID+=10;
            M+="██";
            if (ID>100){clearInterval(SD);}
        }
        function cl() {
            if (ID!=110){
            pre();
            SD=setInterval(pre,1000);}
        }

    </script>
</head>
<body>
<div class="c">
<div class="c1">
    <input type="text" id="t1" onfocus="this.blur()">
</div></div>
</body>
</html>

 

以上是关于js进度条（伪）的主要内容，如果未能解决你的问题，请参考以下文章

活动到片段方法调用带有进度条的线程

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？

QPushButton跑进度条（使用QSS的不同修饰来实现，其实是伪进度条）

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段