码迷,mamicode.com
首页 > Web开发 > 详细

js进度条(伪)

时间:2017-09-25 17:32:16      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:this   win   body   div   width   log   document   html   fun   

<!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进度条(伪)

标签:this   win   body   div   width   log   document   html   fun   

原文地址:http://www.cnblogs.com/fenglin0826/p/7592555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!