Heim > Artikel > Web-Frontend > Einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite

Einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite

高洛峰Original: 2017-02-23 17:29:001557Durchsuche

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) + &#39;px&#39;; //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) + &#39;px&#39;; //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!

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：js implementiert die Navigationsleiste mit einfacher elastischer BewegungNächster Artikel：js implementiert die Navigationsleiste mit einfacher elastischer Bewegung

In Verbindung stehende Artikel

Mehr sehen