Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert Countdown-Sprungseite_Javascript-Fähigkeiten

Javascript implementiert Countdown-Sprungseite_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:19:381094Durchsuche
Viele Webseiten haben ähnliche Effekte, das heißt, sie können nach einer bestimmten Zeit zu anderen Seiten springen. Wenn es humaner ist, wird es einen Countdown-Effekt geben. Das Codebeispiel ist wie folgt:

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="http://www.jb51.net";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";
 t--;
} 
</script> 
<span id="show"></span> 
Der obige Code erzielt den gewünschten Effekt und kann nach 10 Sekunden zur angegebenen Seite springen. Der Implementierungsprozess wird unten vorgestellt.
1. Umsetzungsprinzip:
Das Prinzip ist sehr einfach: Verwenden Sie die Timer-Funktion setInterval(), um die Funktion refer() einmal pro Sekunde auszuführen. Diese Funktion kann t um 1 dekrementieren, ohne sie einmal auszuführen, und gleichzeitig den Strom schreiben t-Wert in das div. Wenn t auf 0 sinkt, das heißt, der Countdown abgeschlossen ist, wird zur angegebenen Seite gesprungen. Das Prinzip ist ungefähr das gleiche.
2. Verwandte Lektüre:
1. Informationen zur Funktion setInterval() finden Sie im Kapitel setInterval() Ausführliche Erläuterung der Funktionsverwendung.
2.location.href finden Sie im href-Attribut des Kapitels Standortobjekt .
3. Informationen zum innerHTML-Attribut finden Sie im Kapitel zur Verwendung des innerHTML-Attributs von js.

Lassen Sie mich zwei einfache Sprungcodes mit Ihnen teilen und sie wie folgt zusammenfassen:

(1) Verwenden Sie die Funktion setTimeout, um Zeitsprünge zu implementieren (der folgende Code sollte in den Textbereich geschrieben werden)

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='http://www.jb51.net',3); 
</script> 

(2) HTML-Code-Implementierung, fügen Sie den folgenden Code im Kopfbereichsblock der Seite hinzu

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=http://www.jb51.net" /> 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn