Drei gängige Methoden, um HTML-Seiten nach 3 Sekunden automatisch zu springen

In der Praxis stoßen wir häufig auf ein Problem: Wie lässt sich die Seite nach N Sekunden automatisch springen?

Ich bin auf Probleme gestoßen und habe selbst nach Informationen gesucht und 3 Methoden zusammengefasst

Methode 1:

Die einfachste Möglichkeit: Füge den Code direkt im vorderen <head> ein:

Code kopieren

Der Code lautet wie folgt:

Methode 2:

Sie müssen die Methode im Fenster verwenden:

setTimeout wertet einen Ausdruck nach einer angegebenen Anzahl von Millisekunden aus.

Beispiel:

Code kopieren

Der Code lautet wie folgt:

window.setTimeout("alert('Hallo Welt')", 1000);

Dies wird im JS-Code geschrieben;

Die konkrete Umsetzung sieht wie folgt aus:

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
onload=function(){ //Diese Methode beim Aufrufen der Webseite laden
setTimeout(go, 3000); /*Die Einheit in js ist ms*/
};
Funktion gehe(){
location.href="http://localhost:8080/TestDemo/index.jsp";
}
</Skript>
//Führe die Go-Methode nach 3 Sekunden automatisch aus und springe direkt zur Seite index.jsp

Methode 3:

Der Fehler der beiden obigen Beispiele besteht darin, dass sie springen können, wir aber nicht wissen, wann wir springen sollen. Implementieren Sie den Countdown 3-2-1;

Die Methode settimeout kann dies nicht mehr tun;

setInterval wertet einen Ausdruck alle angegebene Anzahl von Millisekunden aus.

Wenn die gleiche Zeitspanne verstrichen ist, wird die entsprechende Funktion ausgeführt. Spezifische Implementierungsmethode:

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
onload = Funktion() {
Intervall festlegen (los, 1000);
};
var x=3; //Verwenden globaler Variablen zur Ausführung
Funktion gehe(){
X--;
wenn(x>0){
document.getElementById("sp").innerHTML=x; //Der Wert von x ist jedes Mal anders.
}anders{
Standort.href='res.html';
}
}
</Skript>

Der obige Inhalt sind die drei in diesem Artikel beschriebenen gängigen Methoden zum automatischen Springen von HTML-Seiten nach 3 Sekunden. Ich hoffe, es gefällt Ihnen.

<<: Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt

>>: Docker-Installations- und Konfigurationsschritte für MySQL

So erstellen Sie einen Pod in Kubernetes

Drei gängige Methoden, um HTML-Seiten nach 3 Sekunden automatisch zu springen

So erstellen Sie einen Pod in Kubernetes

Ein negativer oberer Randwert löst das Problem der vertikalen Zentrierung zwischen Beschriftungstext und Eingabe

Implementierungscode zum Erstellen von Screenshots mit HTML und zum Speichern als lokale Bilder

JavaScript implementiert Feuerwerkseffekte mit Soundeffekten

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

Beispielcode, der gängige Grafikeffekte in CSS-Stilen zeigt

Von VirtualBox erstellte virtuelle Debian-Maschine teilt Dateien mit dem Windows-Host

Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen

Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser

Artikel empfehlen

Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

So invertieren Sie die Implementierung einer Bézierkurve in CSS

HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Detaillierte Erklärung des JavaScript-Prototyps und Beispiele

Analyse des Docker-Image-Erstellungsprinzips (Sie können ein Image erstellen, ohne Docker zu installieren)

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

Detaillierte Erläuterung der Verwendung des Linux-Befehls seq

Ausführliche Erklärung der Umgebungsvariablen und Konfigurationsdateien in CentOS

So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen

MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen

Vue implementiert eine Scroll-Ladetabelle

Beispiel für die Erstellung einer kreisförmigen Scroll-Fortschrittsbalken-Animation mit CSS3