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
Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)
Inhaltsverzeichnis 1. Kommunikation zwischen Elte...
Einfaches Setup von VMware ESXi6.7 (mit Bildern und Text)
1. Einführung in VMware vSphere VMware vSphere is...
Vue verwendet MockJS, um simulierte Datenfalldetails zu generieren
Inhaltsverzeichnis Installieren Sie Mockjs in Ihr...
CSS3-Mobil-Vw+Rem-Methode zum Erreichen eines reaktionsfähigen Layouts ohne Abhängigkeit von JS
1. Einleitung (1) Einführung in vw/vh Bevor wir s...
Tutorial zur Verwendung von Hyperlink-Tags in XHTML
Hyperlink, auch „Link“ genannt. Man kann sagen, d...
Detaillierte Erklärung der Funktion und Verwendung der KeepAlive-Komponente in Vue
Vorwort Während des Vorstellungsgesprächs erwähne...
Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
Wenn das Front-End die Schnittstelle anfordert, w...
Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen
Vor kurzem wurde WeChat von Apple gezwungen, eine...
Zusammenfassung der verschiedenen Verwendungsmöglichkeiten von JSON.stringify
Vorwort Jeder, der schon einmal JSON verwendet ha...
Der MySQL-Tagesstatistikbericht trägt 0 ein, wenn für diesen Tag keine Daten vorliegen
1. Reproduktion des Problems: Zählen Sie die Gesa...
So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
Standort / { Index Index.jsp; Proxy_next_upstream...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...
Detailliertes Beispiel zur Installation eines FastDfs-Dateiservers mit Docker Compose
docker-compose.yml Version: '2' Leistunge...
Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann
Sublimieren Sublime Text ist ein Code-Editor (Sub...
Beispiel für die Verwendung von JSX zur Entwicklung einer Markup-Komponente (Front-End-Komponentenbildung)
Inhaltsverzeichnis Aufbau einer JSX-Umgebung NPM ...