Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JavaScript-Implementierung des Tutorials zum Ladeeffekt des Fortschrittsbalkens
Dieser Artikel stellt hauptsächlich detailliert vor, wie man den js-Fortschrittsbalken-Ladeeffekt einfach implementiert. Er hat einen gewissen Referenzwert.
Das Beispiel in diesem Artikel teilt den js-Fortschritt mit allen. Der spezifische Code für den Ladeeffekt dient als Referenz. Der spezifische Inhalt lautet wie folgt:
<!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> <p class="content" id="content"> <input type="button" id="button" value="暂停/增加" onclick="parse()"> <p class="box" id="box"></p> <p class="percent" id="percent"></p> </p> <script> // 获取id为box的元素 var box = document.getElementById("box"); //初始化y,此值只可以放在方法外部,若放到方法内部的话,那方法的每一次执行都是从宽度为0开始,从而使得进度条会一直停留在第一次执行方法的位置。 var y = 0; //定义parse()方法 function parse(){ //获取进度条p的宽度 var x = box.style.width; x = parseInt(x) + 1; y = y+1; //将y值加上百分号赋值给box的宽度。这样每次+1就可以实现进度条占父容器的100%; box.style.width = y + "%"; //将y值加上百分号并赋值给显示下载百分比的p上 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>
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Implementierung des Tutorials zum Ladeeffekt des Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!