JavaScript百分比动态进度条
JavaScript百分比动态进度条属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了百分比动态进度条效果,实际应用通常需要和后台配合使用。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #progressBox{ width: 300px; height: 40px; border: 1px solid #c8c8c8; background: white; position: relative; } #progressBar{ position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: white; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia; clip: rect(0px,0px,40px,0px); background: #00A1F5; } #progressText{ position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: black; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia; } </style> <script> window.onload = function () { var iNow = 0; var timer = setInterval(function (argument) { if (iNow == 100) { clearInterval(timer); } else { iNow += 1; 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,0px)'; 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>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。
(2).var iNow = 0,声明一个变量并赋值为0,用来作为百分比的数字。
(3).var timer = setInterval(function (argument) {
if (iNow == 100) {
clearInterval(timer);
} else {
iNow += 1;
progressFn(iNow);
}
}, 30),一个定时器函数,每隔30毫秒执行一次指定函数。
如果iNow值等于100,那么就停止定时器函数的执行。
否则的话iNow值每次加1,并且调用progressFn(),从而实现动态百分比效果。
(4).function progressFn(cent) {},参数是一个数字。
(5).var oDiv1 = document.getElementById('progressBox');
var oDiv2 = document.getElementById('progressBar');
var oDiv3 = document.getElementById('progressText');
获取三个元素对象。
(6).var allWidth = parseInt(getStyle(oDiv1, 'width')),获取元素的width值。
(7).oDiv2.innerHTML = cent + '%',设置元素的内容,就是那个动态的百分比数字。
(8).oDiv3.innerHTML = cent + '%',之所以有和上面这么重复的一步,是因为,刚开始progressBar元素的宽度是0,没有覆盖progressText元素,但是随着progressBar元素宽度的增加,最终会覆盖掉progressText元素显示的百分比数字,两个同时设置就能保证无论何时都能够完整显示百分比数字。
(9).oDiv2.style.clip = 'rect(0px,' + cent / 100 * allWidth + 'px,40px,0px)',动态设置元素的click属性值。
(10).function getStyle(obj, attr) {},此方法可以获取元素指定的样式属性值。
二.相关阅读:
(1).setInterval()参阅setInterval()一章节。
(2).clearInterval()参阅clearInterval()一章节。
(3).parseInt()参阅javascript parseInt()一章节。
(4). innerHTML参阅innerHTML一章节。
(5).clip属性参阅CSS3 clip一章节。
(6).getStyle()参阅js如何获取非内部取样式表中定义的属性值一章节。
JavaScript百分比动态进度条,这样的场景在实际项目中还是用的比较多的,关于JavaScript百分比动态进度条就介绍到这了。