Einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite-js-Tutorial-php.cn

Einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite

高洛峰

Freigeben： 2017-02-23 17:29:00

Original

1596 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!