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 Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung
1. SSH-Remoteverwaltung SSH-Definition SSH (Secur...
MySQL-Transaktionskontrollfluss und ACID-Eigenschaften
Inhaltsverzeichnis 1. ACID-Eigenschaften Syntax d...
Beispiel für die Konfiguration von Nginx im CentOS-Server
Laden Sie das sichere Terminal MobaXterm_Personal...
Über die Position des H1-Tags in XHTML
In letzter Zeit wurde viel über H1 diskutiert (auf...
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML sollte wie folgt geschrieben...
So führen Sie das Springboot-Projekt im Docker aus
1. Klicken Sie unten in IDEA auf Terminal und geb...
10 zu wenig genutzte oder missverstandene HTML-Tags
Hier sind 10 HTML-Tags, die zu wenig verwendet od...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.24
In diesem Artikel finden Sie das Installations-Tu...
Weitere Features der JavaScript-Konsole
Inhaltsverzeichnis Überblick console.log konsole....
Detaillierte Erläuterung der Wissenspunkte zu Linux Netfilter/Iptables
Netzfilter Netfilter ist ein Paketverarbeitungsmo...
Erläuterung der Methode zum Schreiben von SQL-Anweisungen zum Einfügen
Methode 1: INSERT INTO t1(Feld1,Feld2) VALUE(v001...
JSON (JavaScript Object Notation) in einem Artikel verstehen
Inhaltsverzeichnis JSON wird angezeigt JSON-Struk...
Details zum Vergleich der MySQL-Datenkomprimierungsleistung
Inhaltsverzeichnis 1. Testumgebung 1.1 Hardware u...
So passen Sie einen EventEmitter in node.js an
Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...
VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)
1. Installationsumgebung Computermodell: Lenovo Y...