Heim > Artikel > Web-Frontend > Fünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren
Fünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren
- 不言Original
- 2018-05-07 16:18:403754Durchsuche
Dieser Artikel stellt hauptsächlich die fünf Methoden des automatischen Seitensprungs in HTML vor. Jetzt kann ich ihn mit Ihnen teilen.
Im vorherigen Artikel haben wir stellte drei gängige Methoden zum automatischen Springen einer HTML-Seite nach 3 Sekunden vor. In diesem Artikel werden Ihnen weiterhin relevante Kenntnisse über HTML-Seitensprünge vermittelt.
Im Folgenden sind fünf Beispiele aufgeführt, um dies im Detail zu erläutern. Die Hauptfunktion dieser Beispiele besteht darin, nach 5 Sekunden automatisch zur Datei hello.html im selben Verzeichnis zu springen (diese entsprechend Ihren eigenen Anforderungen zu ändern).
1) Implementierung von HTML
Code kopieren
Der Code lautet wie folgt:
<head> <meta http-equiv="refresh" content="5;url=hello.html"> </head>
Vorteile: Einfach
Nachteile: Kann nicht in Struts Tiles verwendet werden
2) Implementierung von Javascript
Code kopieren
Der Code lautet wie folgt:
<mce:script language="javascript" type="text/javascript"><!--
setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>Vorteile: Flexibel, mit weiteren anderen Funktionen kombinierbar
Nachteile: Betroffen von verschiedene Browser
3) Kombinierte Javascript-Implementierung von Reciprocal (IE)
Code kopieren
Der Code lautet wie folgt:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>Vorteile: benutzerfreundlicher
Nachteile: Firefox unterstützt nicht (Firefox unterstützt nicht die innerText-Attribute von span, p usw.)
3) JavaScript, das die reziproke Implementierung (Firefox) kombiniert
Code kopieren
Der Code ist wie folgt folgt:
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>4) Firefox löst das Problem, dass innerText nicht unterstützt wird
Code kopieren
Der Code lautet wie folgt:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
// --></mce:script>5) Integration 3) und 3')
Code kopieren
Der Code lautet wie folgt:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
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);
function redirect()
{
if (second < 0)
{
location.href='http://liting6680.blog.163.com/blog/hello.html';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
// --></mce:script>Das Obige zeigt fünf Beispiele. Dies ist eine Einführung in fünf Möglichkeiten, den automatischen Seitensprung in HTML zu implementieren. Ich hoffe, es gefällt Ihnen.
Das obige ist der detaillierte Inhalt vonFünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!