JavaScript zum Erzielen eines Fortschrittsbalkeneffekts
|
In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des Fortschrittsbalkeneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Das Effektbild ist diesmal wie folgt:
Dieses Beispiel ist nicht schwer durchzuführen. Als ich es übte, war der neue Wissenspunkt, die Funktion Die allgemeine Idee besteht darin, zunächst eine Div-Box mit einer Breite von 0 in eine Div-Box einzufügen und dann einen Timer in der Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
#Behälter {
Breite: 500px;
Höhe: 200px;
Rand: 50px automatisch;
Position: relativ;
}
#Kasten {
Breite: 260px;
Höhe: 30px;
Rand: 1px rosa durchgehend;
Rahmenradius: 16px;
Rand unten: 20px;
Polsterung: 1px;
Überlauf: versteckt;
}
#Fortsetzung {
Breite: 0;
Höhe: 100%;
Hintergrundfarbe: rosa;
Rahmenradius: 16px;
}
#btn {
Position: absolut;
Rand links: 110px;
Breite: 50px;
Höhe: 30px;
}
#text {
Anzeige: Block;
Position: relativ;
links: 120px;
Rand unten: 20px;
}
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<div id="box" Dateninhalt-vor="22">
<div id="forts"></div>
</div>
<div id="text">0 %</div>
<button id="btn">Senden</button>
</div>
<Skript>
let box = document.getElementById("box");
let btn = document.getElementById("btn");
let cont = document.getElementById("cont");
let text = document.getElementById("text");
Funktion getstyle(Objekt, Name) {
wenn (window.getComputedStyle) {
gibt window.getComputedStyle(obj, null)[name] zurück;
}
anders {
gibt obj.currentStyle[name] zurück;
}
}
btn.onclick = Funktion () {
sei ini = 0;
let num = setInterval(() => {
let tem = parseInt(window.getComputedStyle(cont, null)["Breite"]);
sei jetzt = tem + 26;
wenn (tem >= 260) {
console.log(jetzt);
Intervall löschen(num);
zurückkehren;
}
cont.style.width = jetzt + "px";
ini = ini + 10;
text.innerText = ini + "%";
}, 80);
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)
>>: Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden
Artikel empfehlen
Detailliertes Tutorial zum Upgrade der kostenlosen Installationsversion von MySQL 5.7.17 unter Windows (x86, 64 Bit)
MySQL muss auf Version 5.5.3 oder höher aktualisi...
js implementiert benutzerdefinierte Dropdown-Box
In diesem Artikelbeispiel wird der spezifische JS...
Docker-Image-Erstellung und Paketierung und Bereitstellung des gesamten Projekts mit einem Klick
Einführung in allgemeine Dockerfile-Anweisungen A...
Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 5.7.15
Dieser Artikel enthält ein ausführliches Tutorial...
Vue-Statusverwaltung: Verwendung von Pinia statt Vuex
Inhaltsverzeichnis 1. Was ist Pinia? 2. Pinia ist...
Einführung und Architektur von Apache Arrow, einem leistungsstarken Datenformatbibliothekspaket auf JVM (Gkatziouras)
Apache Arrow ist ein beliebtes Format, das von ve...
Vue/React-Einzelseitenanwendung zurück ohne Aktualisierungslösung
Inhaltsverzeichnis Einführung Warum die Mühe? Com...
Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt
Inhaltsverzeichnis Werkzeug Installieren Sie das ...
Vue implementiert den Anruf der PC-Kamera, um Fotos in Echtzeit aufzunehmen
Vue ruft die PC-Kamera auf, um Bilder in Echtzeit...
Lernen Sie die MySQL-Zeichensatzeinstellungen in 5 Minuten kennen
Inhaltsverzeichnis 1. Inhaltsübersicht 2. Konzept...
So zeigen Sie MySql-Indizes an und optimieren sie
MySQL unterstützt Hash- und B-Tree-Indizes. InnoD...
Fallbeispiel zur TypeScript-Schnittstellendefinition
Die Rolle der Schnittstelle: Schnittstelle, auf E...
So installieren und konfigurieren Sie Redis in CentOS7
Einführung Es ist nicht nötig, Redis im Detail vo...
Der Vue Axios Interceptor verwendet häufig die wiederholte Stornierung von Anforderungen
Einführung Im vorherigen Artikel wurden die einfa...
Detaillierte Erläuterung der Konfigurationsstrategie für Linux-Umgebungsvariablen
Beim Anpassen der Softwareinstallation müssen Sie...