Ein einfaches Beispiel für einen Javascript-Webseiten-Fortschrittsbalken
Ich habe kürzlich neue Erkenntnisse gewonnen und bin auf einen kleinen funktionalen Webseiten-Fortschrittsbalken gestoßen, der ziemlich gut ist . Ich werde es hier aufzeichnen, vielleicht kann es jedem helfen,
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:100%;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<p id="box">
<p id="bar"></p>
</p>
<script language="javascript">
var total = 6480; //总数
var curN = 4480; //当前值
function show()
{
var box = document.getElementById("box");
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>Verneinung:
<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<p id="box">
<p id="bar"></p>
</p>
<script language="javascript">
var total = 6480; //总数
var curN = 6400; //当前值
var baseNub = total - curN;
function show()
{
var box = document.getElementById("box");
var o = document.getElementById("bar");
o.style.width = ((baseNub / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!
Weitere Artikel zu einfachen Beispielen für den Fortschrittsbalken von Javascript-Webseiten finden Sie auf der chinesischen PHP-Website!
Was ist der Unterschied zwischen Legacy und UEFI?
Flex-Tutorial
Einführung in Festplattenleistungsindikatoren
Schritte zur SpringBoot-Projekterstellung
Wo sind die Online-Zuschauerzahlen bei Station B?
HTML-Webseitenproduktion
Was sind die Java-Texteditoren?
Was soll ich tun, wenn msconfig nicht geöffnet werden kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
