進度條 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: dotte ...
進度條
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
