简单实现js进度条加载效果
程序员文章站
2022-09-08 20:23:21
本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 当今幸福的十大标准
下一篇: JavaScript实现简单评论功能