Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite

高洛峰
Freigeben: 2017-02-23 17:29:00
Original
1611 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage