本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
