Article HTML5 : 5 façons de réaliser un saut de page (partage de code)-tutoriel HTML-php.cn

Article HTML5 : 5 façons de réaliser un saut de page (partage de code)

奋力向前

Libérer： 2021-08-16 15:37:28

avant

7814 Les gens l'ont consulté

Dans l'article précédent "Vous apprendre à utiliser CSS pour ajouter des images d'arrière-plan aux polices HTML", je vous ai présenté comment utiliser CSS pour ajouter des images d'arrière-plan aux polices HTML. L'article suivant vous présentera comment utiliser HTML5 pour réaliser un saut de page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Article HTML5 : 5 façons de réaliser un saut de page (partage de code)

Cinq exemples sont répertoriés ci-dessous pour expliquer en détail. La fonction principale de ces exemples est : après 5 secondes, accédez automatiquement au fichier hello.html dans le même répertoire (modifiez-le selon vos propres besoins).

1. Implémentation de html

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

Copier après la connexion

Avantages : Simple
Inconvénients : Ne peut pas être utilisé dans les tuiles Struts

2 Implémentation de javascript

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href=&#39;hello.html&#39;;
// 以下方式定时跳转
setTimeout("javascript:location.href=&#39;hello.html&#39;", 5000); 
</script>

Copier après la connexion

Avantages : Flexible, peut être combiné avec d'autres fonctions
Inconvénients. : Affecté par différents navigateurs

3. Combiné avec l'implémentation réciproque de javascript (IE)

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = totalSecond.innerText; 
setInterval("redirect()", 1000); 
function redirect(){ 
totalSecond.innerText=--second; 
if(second<0) location.href=&#39;hello.html&#39;; 
} 
</script>

Copier après la connexion

Avantages : plus convivial
Inconvénients : Firefox ne prend pas en charge (Firefox ne prend pas en charge les attributs innerText de span, p, etc. )

4. Combiné avec l'implémentation javascript de réciproque (firefox)

<script language="javascript" type="text/javascript"> 
var second = document.getElementById(&#39;totalSecond&#39;).textContent; 
setInterval("redirect()", 1000); 
function redirect() 
{ 
document.getElementById(&#39;totalSecond&#39;).textContent = --second; 
if (second < 0) location.href = &#39;hello.html&#39;; 
} 
</script>

Copier après la connexion

5 Résolvez le problème que Firefox ne prend pas en charge innerText

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText"; 
} else{ 
document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent"; 
} 
</script>

Copier après la connexion

Code complet avec 3 et 4

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript"> 
var second = document.getElementById(&#39;totalSecond&#39;).textContent; 

if (navigator.appName.indexOf("Explorer") > -1)  { 
	second = document.getElementById(&#39;totalSecond&#39;).innerText; 
} else { 
	second = document.getElementById(&#39;totalSecond&#39;).textContent; 
} 

setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
	location.href = &#39;hello.html&#39;; 
} else { 
	if (navigator.appName.indexOf("Explorer") > -1) { 
		document.getElementById(&#39;totalSecond&#39;).innerText = second--; 
	} else { 
		document.getElementById(&#39;totalSecond&#39;).textContent = second--; 
	} 
} 
} 
</script>

Copier après la connexion

Apprentissage recommandé : Tutoriel vidéo HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!