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
Detailliertes Tutorial zur Installation von Centos8 auf VMware
Offizielle Website-Adresse von CentOS https://www...
Grundlegende Befehle für MySQL-Datenbankoperationen
1. Erstellen Sie eine Datenbank: Daten erstellen ...
Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)
Frage Als ich heute eine Projektfunktion schrieb,...
Detaillierte Schritte für deepin20 zur Installation von NVIDIA Closed-Source-Treibern
Schritt 1: Installieren Sie den tiefen "Graf...
Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden
MySQL-Gruppensortierung, um die obersten N zu fin...
Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels
1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...
Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue
Wirkung: Ideen: Verwenden Sie das Eingabetypattri...
Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst
Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...
Detaillierte Erläuterung der Konfiguration des statischen Nginx-Dienstes (Root- und Alias-Anweisungen)
Statische Dateien Nginx ist für seine hohe Leistu...
Detaillierte Erklärung des Sidecar-Modus in Docker Compose
Inhaltsverzeichnis Was ist Docker Compose Anforde...
HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte
<p><b>Dies ist eine fette Schriftart&l...
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...
Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen
Verwenden Sie HTML, um komplexe Tabellen zu erste...
So passen Sie die Höhe eines Divs an die Höhe des Browsers an
Diese alte Frage hat unzählige Frontend-Entwickler...
So lassen sich Python-Skripte direkt unter Ubuntu ausführen
Nehmen wir als Beispiel das Übersetzungsprogramm....