<!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> <input type="button" value="暂停/增加"> <div></div> <div></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>
简单实现js进度条加载效果
内容版权声明：除非注明，否则皆为本站原创文章。