分享一个原生JS实现的动态加载进度条特效，效果如下：
实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现加载进度条</title>
<style>
#box {
width: 300px;
height: 40px;
border: 1px solid #C8C8C8;
background: white;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#bar {
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, 0, 40px, 0px);
background: #00A1F5;
}
#text {
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>
</head>
<body>
<div id="box">
<div id="bar">0%</div>
<div id="text">0%</div>
</div>
<script>
window.onload = function () {
var percent = 0;
// 设定定时器
var timer = setInterval(function () {
// 如果当前的值为100
if (percent == 100) {
// 清除定时器
clearInterval(timer);
} else {
// 将当前状态值累加1
percent += 1;
// 调用执行状态的函数,传入状态值
progress(percent);
}
}, 30);
// 进度变化条
function progress(percent) {
// 获取容器
var box = document.getElementById('box');
// 获取进度条
var bar = document.getElementById('bar');
// 获取内层文字
var text = document.getElementById('text');
// 获取总进度条的宽度
var allWidth = parseInt(getStyle(box, 'width'));
// 设定内层两个div的文字内容一样
bar.innerHTML = percent + '%';
text.innerHTML = percent + '%';
// 修改clip的宽度值
bar.style.clip = 'rect(0px, ' + percent / 100 * allWidth + 'px, 40px, 0px)';
};
// 获取当前元素的属性值
function getStyle(obj, attr) {
// 兼容IE
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
// 第二个参数为false是通用的写法，目的是为了兼容老版本
return getComputedStyle(obj, false)[attr];
}
}
};
</script>
</body>
</html>今天的文章原生JS实现加载进度条分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29489.html
