这篇文章主要介绍了js创建动态加载进度条的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
进度条可以用来描述正在执行的任何任务的进度,它通常会被用于显示下载和上传时的状态。换句话说,进度条可以用来描述正在进行的任何事情的状态。
下面我们就来看看使用JavaScript如何实现动态加载的进度条?我们需要执行以下步骤:
1、为进度条创建HTML结构:
下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。
<div id="Progress_Status"> <div id="myprogressBar"></div> </div>
2、添加CSS:
下面的代码用于设置进度条的宽度和背景颜色以及条形图中的进度状态。
#Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; }
3、添加JavaScript:
下面的代码使用javascript函数“update”和“scene”创建一个动态progess bar(动画)。
function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; } } }
运行:
这样的加载样式有点单调,我们还可以添加数字标签以指示用户在流程中的位置;这需要在进度条内部或外部添加新元素,显示进度状态。
4、添加数字加载样式
我们可以在JavaScript的else {}语句里在添加一条语句:
element.innerHTML = width * 1 + '%';
就可以实现数字加载显示进度状态的样式,运行效果:
感谢你能够认真阅读完这篇文章,希望小编分享js创建动态加载进度条的方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:js创建动态加载进度条的方法-创新互联
文章出自:https://www.cdcxhl.com/article14/hodde.html
成都网站建设公司_创新互联,为您提供企业网站制作、微信公众号、响应式网站、全网营销推广、营销型网站建设、服务器托管
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联