Heim > Web-Frontend > js-Tutorial > Implementierung geplanter Sprünge zu bestimmten Seiten basierend auf JavaScript_Javascript-Kenntnissen

Implementierung geplanter Sprünge zu bestimmten Seiten basierend auf JavaScript_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:22:32
Original
1802 Leute haben es durchsucht

In einigen Szenarien muss die Webseite nach einer bestimmten Zeit automatisch zur angegebenen Seite springen können. Wenn die angegebene Webseite beispielsweise nicht gefunden werden kann, wird die zuvor festgelegte 404-Seite angezeigt und zur angegebenen Seite gesprungen Auf dieser Seite finden Sie im Folgenden einen Code, um diesen Effekt zu erzielen.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wwww.jb51.net';
} 
else
{
if(navigator.appName.indexOf("Explorer")>-1)
{
document.getElementById('totalSecond').innerText=second--;
} 
else
{
document.getElementById('totalSecond').textContent=second--;
}
}
}
window.onload=function()
{
var second=document.getElementById('totalSecond').textContent;
if(navigator.appName.indexOf("Explorer")>-1)
{
second=document.getElementById('totalSecond').innerText;
} 
else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()",1000);
}
</script>
</head>
<body>
<h1>找不到指定的页面</h1>
<span id="totalSecond">3</span>秒后自动跳转到指定页面
</body>
</html>
Nach dem Login kopieren

Der obige Code kann nach drei Sekunden zur angegebenen Seite springen. Im Folgenden finden Sie eine kurze Einführung in den Implementierungsprozess.

1. Umsetzungsprinzip:

Verwenden Sie die Timer-Funktion, um die Zahl im Span-Element jede Sekunde zu ändern. Das Prinzip ist ungefähr das gleiche. Sie können Codekommentare anzeigen.

2. Codekommentare:

1.Funktion Redirect(){}, deklariert eine Mehrdeutigkeit für den Sprung.
2.if(second<0) {location.href='http://wwww.jb51.net';} Wenn die Zahl kleiner als Null ist, wird gesprungen.
3.else{}, andernfalls wird der Countdown-Effekt ausgeführt.
4.if(navigator.appName.indexOf("Explorer")>-1), bestimmen Sie, ob es sich um einen IE-Browser handelt.
5.document.getElementById('totalSecond').innerText=second--, wenn es sich um einen IE-Browser handelt, verwenden Sie das innerText-Attribut, um den numerischen Wert im span-Element festzulegen.
6.document.getElementById('totalSecond').textContent=second--, andere Browser verwenden das textContent-Attribut, um den numerischen Wert im span-Element festzulegen.
7.window.onload=function(){}, führen Sie den Code in der Funktion aus, wenn das Dokument vollständig geladen ist.
8.if(navigator.appName.indexOf("Explorer")>-1){}: Wenn es sich um einen IE-Browser handelt, verwenden Sie das innerText-Attribut, um den Inhalt im span-Element abzurufen.
9.second = document.getElementById('totalSecond').textContent, andere Standardbrowser verwenden das textContent-Attribut, um den Span-Elementwert abzurufen.
10.setInterval("redirect()",1000), führt die Timer-Funktion jede Sekunde aus.

3. Verwandte Lektüre:

1. Die Funktion indexof() finden Sie im Kapitel Ausführliche Erläuterung der Verwendung der Methode lastIndexOf() in JavaScript .
2. Informationen zur Funktion setInterval() finden Sie im Kapitel Verwendung und Unterschiede zwischen setInterval() und setTimeout()Beispieleinführung.

Der obige Inhalt ist die vollständige Beschreibung, wie geplante Sprünge zu bestimmten Seiten basierend auf JavaScript implementiert werden, das vom Herausgeber geteilt wurde. Ich hoffe, es gefällt Ihnen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage