原生JS实现加载进度条
更新时间：2021年10月19日 17:18:45 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文分享一个原生JS实现的动态加载进度条特效，效果如下：
实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现加载进度条</title>
<style>
#progressBox {
width: 300px;
height: 40px;
border: 1px solid #C8C8C8;
background: white;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#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, 0, 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 () {
// 设定当前起始状态值,
// 真实情况中用html5的onprogress和onload来完成
// 还可以跟后台配合，通过ajax实时的返回数据
var iNow = 0;
// 设定定时器
var timer = setInterval(function () {
// 如果当前的值为100
if (iNow == 100) {
// 清除定时器
clearInterval(timer);
}else {
// 将当前状态值累加1
iNow += 1;
// 调用执行状态的函数,传入状态值
progressFn(iNow);
}
}, 30);
function progressFn(cent) {
// 获取最外层的div
var oDiv1 = document.getElementById('progressBox');
// 获取内层进度条的div
var oDiv2 = document.getElementById('progressBar');
// 获取内层文字发生变化时的div
var oDiv3 = document.getElementById('progressText');
// 获取总进度条的宽度
var allWidth = parseInt(getStyle(oDiv1, 'width'));
// 设定内层两个div的文字内容一样
oDiv2.innerHTML = cent + '%';
oDiv3.innerHTML = cent + '%';
// 修改clip的的宽度值
oDiv2.style.clip = 'rect(0px, ' + cent / 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>
</head>
<body>
<div id="progressBox">
<div id="progressBar">0%</div>
<!-- 设定第二个层以便当进度超过文字的时候，修改文字的颜色 -->
<div id="progressText">0%</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了js 实现div拖拽拉伸完整示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
下面小编就为大家带来一篇阻止表单提交按钮多次提交的完美解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-05
这篇文章主要为大家详细介绍了原生JS实现烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
日常我们在开发小程序的时候，总是希望把数据提交回数据库进行存储，那在小程序中该如何访问数据库呢？本篇我们就介绍一下具体的思路2022-08-08
js中的promise是一个异步编程的解决方案,语法层面上他是一个构造函数,名字为Promise(),下面这篇文章主要给大家介绍了关于JavaScript中Promise处理异步的并行与串行的相关资料,需要的朋友可以参考下2022-12-12
本文通过实例代码给大家介绍了javascript中关于正则表达式的巧妙操作技巧，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
这篇文章主要为大家详细介绍了原生js滑动轮播封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了javascript实现简单的ajax封装功能,结合实例形式分析了ajax基本功能与操作实现技巧,需要的朋友可以参考下2016-12-12
HTML5+JS+JQuery+ECharts实现异步加载问题
这篇文章主要介绍了HTML5+JS+JQuery+ECharts实现异步加载问题,需要的朋友可以参考下2017-12-12
本文介绍了javascript获取以及设置光标位置的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论