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

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

奋力向前avant: 2021-08-16 15:33:017802parcourir

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.

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>

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>

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>

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>

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>

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>

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!

JavaScript html5 firefox css html struts

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir un effet de centrage dans les pages Web HTML (partage de code)Article suivant：Comment obtenir un effet de centrage dans les pages Web HTML (partage de code)

Articles Liés

Voir plus