使用JavaScript怎么实现一个进度条加载效果
这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个进度条加载效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
具体内容如下
<!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>
上述就是小编为大家分享的使用JavaScript怎么实现一个进度条加载效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。