js进度条（伪）

最新推荐文章于 2022-08-23 17:23:58 发布

丑心疼

最新推荐文章于 2022-08-23 17:23:58 发布

阅读量554

点赞数

原文链接：http://www.cnblogs.com/fenglin0826/p/7592555.html

版权

<!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>