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
CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt
Der Anwendungsbereich von CSS ist global. Wenn da...
Vue verwendet Drag & Drop, um einen Strukturbaum zu erstellen
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen
Inhaltsverzeichnis Vorwort 1. NJS-Modul installie...
Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.
1. Stoppen Sie zuerst den mysqld.exe-Prozess 2. Ö...
Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid
Einführung in Selenium Grid Obwohl einige neue Fu...
Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify
Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...
Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript
1. Konzept Sie alle sind Attribute des Elements u...
Wie gestaltet man eine Webseite? Wie erstelle ich eine Webseite?
Wenn es um das Verständnis von Webdesign geht, sc...
K3s-Erste-Schritte-Handbuch - Detailliertes Tutorial zum Ausführen von K3s in Docker
Was ist k3d? k3d ist ein kleines Programm zum Aus...
Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).
Installieren Sie den NVIDIA-Grafikkartentreiber u...
Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue
Inhaltsverzeichnis 1. Installieren und importiere...
Beispiele für ES6-Schleifen und iterierbare Objekte
Dieser Artikel untersucht die ES6-for...of-Schlei...
Detaillierte Erklärung zur Verwendung von umask unter Linux
Ich habe vor Kurzem angefangen, Linux zu lernen. ...
Eine Fallstudie zur MySQL-Optimierung
1. Hintergrund Auf jeder OLTP-Datenbankinstanz vo...
Zusammenfassung der Fallstricke bei der Installation von MySQL und MySQLClient auf CentOS7
1. MySQL Yum-Repository hinzufügen Offizielle MyS...