简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

js-Fortschrittsbalken-Beispielcode

高洛峰
Freigeben： 2016-12-16 16:46:48
Original
1175 Leute haben es durchsucht

Beispiel: sehr einfacher JS-Fortschrittsbalken-Implementierungscode, der zum zeitaufwändigen Laden von Seiten oder zur Stapelgenerierung von Seiten verwendet werden kann.

Vollständiger Code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>js进度条-www.yuju100.com</title> 
<style type="text/css"> 
body{ 
text-align:center; 
} 
.graph{ 
width:450px; 
border:1px solid #F8B3D0; 
height:25px; 
} 
#bar{ 
display:block; 
background:#FFE7F4; 
float:left; 
height:100%; 
text-align:center; 
} 
#barNum{ 
position:absolute; 
} 
</style> 
<script type="text/javascript"> 
function $(obj){ 
return document.getElementById(obj); 
} 
function go(){ 
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
$("bar").innerHTML = $("bar").style.width; 
if($("bar").style.width == "100%"){ 
window.clearInterval(bar); 
}
} 
var bar = window.setInterval("go()",50); 
window.onload = function(){ 
bar; 
} 
</script> 
</head> 
<body> 
<div class="graph"> 
<strong id="bar" style="width:1%;"></strong> 
</div> 
</body> 
</html>
Nach dem Login kopieren


Weitere Artikel zum JS-Fortschrittsbalken-Beispielcode finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten：
js进度条
Quelle：php.cn
Vorheriger Artikel：Pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten Nächster Artikel：JS implementiert Seitensprungeffekte mit Fortschrittsbalken
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich die Höhe eines äußeren Divs so einstellen, dass sie immer der Höhe eines bestimmten inneren Divs entspricht? Ich habe ein äußeres Div, das drei innere Divs enthält. Ich möchte, dass das ganz linke in...
Aus 2023-11-07 13:59:30
0
2
314
Bitte wenden Sie zuerst die entsprechende Transformation an, um den internen Serverfehler von vite zu beheben: Fehlender Codegenerierungsknoten für den Element-/if/for-Knoten Gestern habe ich also an einem Projekt gearbeitet und als ich gerade dabei war, aufzuhören...
Aus 2023-10-26 14:52:04
0
2
211
Richten Sie die Dezimalstellen der Zahlen in der Tabelle so aus, dass in den Zellen eine pseudozentrierte Ausrichtung erscheint Ich möchte eine Tabelle mit einer Spalte mit Dezimalzahlen mit unterschiedlichen Längen vo...
Aus 2023-10-24 13:01:47
0
1
266
Konvertieren Sie den regulären JavaScript-Ausdruck in PHP Ich weiß, dass diese Frage etwa ein Dutzend Mal gestellt wurde, aber technisch gesehen ist...
Aus 2023-10-23 22:58:33
0
2
394
将Array als Abhängigkeit in useEffect einbinden Alle 5 Sekunden gehen Daten aus der langen Abfrage ein, und ich möchte, dass meine Kompone...
Aus 2023-10-17 18:50:23
0
2
207
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！