Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der JavaScript-Implementierung des Tutorials zum Ladeeffekt des Fortschrittsbalkens

Detaillierte Erläuterung der JavaScript-Implementierung des Tutorials zum Ladeeffekt des Fortschrittsbalkens

巴扎黑Original: 2017-08-18 10:53:441359Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Grundlegende Einführung in Getter und Setter in JavascriptNächster Artikel：Grundlegende Einführung in Getter und Setter in Javascript

In Verbindung stehende Artikel

Mehr sehen