简单实现js进度条加载效果

时间：2021-05-18

本文实例为大家分享了js进度条加载效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下载进度</title><style>.content{width: 500px;height: 200px;background: pink;margin:0 auto;}.box{width: 20px;height: 30px;line-height: 30px;text-align: center;background: #f00;color: #fff;}.percent{width: 100%;height: 30px;line-height: 30px;color: #00f;text-align: center;}</style></head><body><div class="content" id="content"><input type="button" id="button" value="暂停/增加" onclick="parse()"><div class="box" id="box"></div><div class="percent" id="percent"></div></div><script>// 获取id为box的元素var box = document.getElementById("box");//初始化y，此值只可以放在方法外部，若放到方法内部的话，那方法的每一次执行都是从宽度为0开始，从而使得进度条会一直停留在第一次执行方法的位置。var y = 0;//定义parse()方法function parse(){//获取进度条div的宽度var x = box.style.width;x = parseInt(x) + 1;y = y+1;//将y值加上百分号赋值给box的宽度。这样每次+1就可以实现进度条占父容器的100%;box.style.width = y + "%";//将y值加上百分号并赋值给显示下载百分比的div上document.getElementById("percent").innerHTML = y + "%";//判断当y已经100的时候，也就是进度条的宽度和父容器的宽度一致的时候停止。if (y >= 100) {clearInterval(id);document.getElementById("percent").innerHTML = "100%";document.getElementById("box").innerHTML = "下载完毕!";}}//每10毫秒调用一下parse()方法.var id = setInterval("parse()",10);//当单机父容器时，进度条停止document.getElementById("content").onclick = function(){clearInterval(id);} </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章