进度条效果
Posted xiaoyaolang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进度条效果相关的知识，希望对你有一定的参考价值。
进度条
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; }
以上是关于进度条效果的主要内容，如果未能解决你的问题，请参考以下文章
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？
在recyclerview片段Reandroid中屏幕旋转后进度条不显示