javascript百分比进度条效果代码实例
分类:实例代码
分享一段代码实例,它实现了百分比进度条效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { padding: 0; margin: 0; } #progressBox { width: 300px; height: 40px; border: 1px solid #c8c8c8; background: #fff; position: relative; } #progressBar { position: absolute; top: 0; left: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: #fff; text-align: center; font-size: 20px; font-weight: bold; clip: rect(0px,40px,40px,0); background: #00a1f5; } #progressText { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: #000; text-align: center; font-size: 20px; font-weight: bold; } </style> <script> window.onload = function() { var iNow = 0; var tiemr = setInterval(function() { if (iNow == 100) { clearInterval(tiemr) } else { iNow += 2; progressFn(iNow) } }, 30) function progressFn(cent) { var oDiv1 = document.getElementById('progressBox'); var oDiv2 = document.getElementById('progressBar'); var oDiv3 = document.getElementById('progressText'); var allWidth = parseInt(getStyle(oDiv1, 'width')); oDiv2.innerHTML = cent + '%'; oDiv3.innerHTML = cent + '%'; oDiv2.style.clip = "rect(0px," + cent / 100 * allWidth + "px,40px,0)"; function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle } else { return getComputedStyle(obj, false) } } } } </script> </head> <body> <div id="progressBox"> <div id="progressBar">0%</div> <div id="progressText">0%</div> </div> </body> </html>
javascript百分比进度条效果代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript百分比进度条效果代码实例就介绍到这了。
javascript百分比进度条效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。