进度条效果

进度条

 1     <style>
 2         #progress{
 3             position: relative;
 4             margin: auto;
 5             top: 200px;
 6             display: block;
 7             width: 200px;
 8             height: 20px;
 9             border-style: dotted;
10             border-width: thin;
11             border-color: darkgreen;
12         }
13         #filldiv{
14             position:absolute;
15             top: 0px;
16             left: 0px;
17             width: 0px;
18             height: 20px;
19             background: blue;
20         }
21         #percent{
22             position: absolute;
23             top: 0px;
24             left: 200px;
25         }
26     </style>
27     <script>
28         
29     </script>
30     <body>
31         <div id="progress">
32             <div id="filldiv"></div>
33             <span id="percent">0</span>
34         </div>
35     </body>
36 </html>
37 <script src="public.js"></script>
38 <script>
39     var filldiv = document.getElementById("filldiv");
40     var percent = document.getElementById("percent");
41     var timer = setInterval(function(){
42         filldiv.style.width = filldiv.offsetWidth + 2 + "px";
43         filldiv.style.background = getColor();
44         var rate = 100 * filldiv.offsetWidth / 200;
45         percent.innerHTML  = rate + "%";
46         if(filldiv.offsetWidth == 200){
47             clearInterval(timer);
48         }
49     },60)
50 </script>

public.js

function $id(id){//给我一个id名，返回一个这个id的元素
    return document.getElementById(id);
}
//求随机数
function rand(min,max){
    return Math.round(Math.random()*(max - min) + min);
}

//随机的16进制颜色
function getColor(){
    var str = "0123456789ABCDEF";//十六进制字符串
    var color = "#";
    for(var i = 0; i <= 5; i++){//取6个数
        color += str.charAt(rand(0,15));
        //rand(0,15)随机0-15之间的数，作为charAt()的下标，取出下标对应的字符
    }
    return color;
}
function zero(val){
    return val < 10 ? "0" + val : val;
}
//时间差
function diff(start,end){//2000-2018  2018 - 2000
    //console.log(start.getTime());
    return Math.abs(start.getTime() - end.getTime())/1000;
}

View Code