Verwenden von js, um einen Wasserfalleffekt zu erzielen
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Erzielung des Wasserfallflusseffekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt
Quellcode:
<!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>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.Kasten {
Breite: 70px;
schweben: links;
Rand links: 4px;
Rahmen oben: 1px durchgezogen #000;
}
ul,
ol,
li {
Listenstiltyp: keiner;
}
li {
Breite: 70px;
Anzeige: Block;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<button onclick="reloadPage()">Seite aktualisieren</button>
</body>
</html>
<Skript>
var Boxen = document.querySelectorAll(".box");
//Minimalwert erstellen var min = 0;
//Erstellen Sie ein Farbarray var colour = ["rot", "gelb", "orange", "blau", "lila", "grün","#cdee","#feda","ccc","#eda","#639","#33f","#f38","#ca0"]
für (j = 1; j <= 50; j++) {
var lis = document.createElement("li"); //Li mit Zahlen erstellen
lis.innerHTML = j;
lis.style.height = Math.random() * 40 + 30 + "px"; //Zufällige Höhe abrufen, die Mindesthöhe beträgt 30px
lis.style.backgroundColor = colour[parseInt(Math.random() * colour.length-1)]; //Zufällige Farbe abrufen für (var i = 0; i < boxes.length; i++) {
console.log(boxs[i].clientHeight);
// offsetHeight liefert die Elementhöhennummer if (boxs[i].offsetHeight < boxes[min].offsetHeight) {
min = i; //Holen Sie sich die Sequenznummer des Array-Elements mit der kleinsten Höhe}
}
boxes[min].appendChild(lis) //Füge li zum kürzesten ol hinzu}
Funktion reloadPage() {
location.reload(); // aktualisieren}
</Skript>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:
|
<<: Detaillierte Analyse des Explain-Ausführungsplans in MySQL
>>: Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat
Artikel empfehlen
Detaillierte Erklärung der Funktionsweise von Nginx
So funktioniert Nginx Nginx besteht aus einem Ker...
Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10
Die MySQL-Installation ist in eine Installationsv...
js, um einen einfachen Taschenrechner zu erstellen
In diesem Artikel finden Sie den spezifischen Cod...
Vue implementiert Tab-Tab-Umschaltung
In diesem Artikelbeispiel wird der spezifische Co...
Grafisches Tutorial zur Installation der 64-Bit-Desktopversion von Centos 7
Wenn Sie der Meinung sind, dass das System langsa...
Konzept und Anwendungsbeispiele für die MySQL-Indexkardinalität
Dieser Artikel erläutert anhand von Beispielen da...
Tutorial zur Verwendung von Hyperlink-Tags in XHTML
Hyperlink, auch „Link“ genannt. Man kann sagen, d...
Einfache Schritte zum Schreiben benutzerdefinierter Anweisungen in Vue3.0
Vorwort Vue bietet eine Fülle integrierter Anweis...
Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken
Inhaltsverzeichnis Vorwort Ressourcen zum Thema E...
Analyse von SQL-Integritätsbeschränkungsanweisungen in der Datenbank
Integritätsbeschränkungen Integritätsbedingungen ...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Artikel-Mindmap Warum Master-Slave-Replikation un...
Der Unterschied zwischen KEY, PRIMARY KEY, UNIQUE KEY und INDEX in MySQL
Das im Titel angesprochene Problem lässt sich sch...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
22 Vue-Optimierungstipps (Projektpraxis)
Inhaltsverzeichnis Code-Optimierung Verwenden der...
Das Raster ist Ihr Layoutplan für die Seite
<br /> Englisches Original: http://desktoppu...