HTML5 article: 5 ways to achieve page jump (code sharing)-HTML Tutorial-php.cn

HTML5 article: 5 ways to achieve page jump (code sharing)

奋力向前

Release： 2021-08-16 15:37:28

forward

7803 people have browsed it

In the previous article "Teach you how to use css to add background images to HTML fonts", I introduced you how to use css to add background images to HTML fonts. The following article will introduce to you how to use html5 to achieve page jump. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

HTML5 article: 5 ways to achieve page jump (code sharing)

Five examples are listed below to explain in detail. The main function of these examples is: after 5 seconds, automatically jump to the directory in the same directory. hello.html (modify according to your own needs) file.

1. Implementation of html

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

Copy after login

Advantages: Simple
Disadvantages: Cannot be used in Struts Tiles

2 , Implementation of javascript

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

Copy after login

Advantages: Flexible, can be combined with more other functions
Disadvantages: Affected by different browsers

3. Combined with reciprocal Javascript implementation (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>

Copy after login

Advantages: more user-friendly
Disadvantages: firefox does not support (firefox does not support the innerText attributes of span, p, etc.)

4. Combined with the javascript implementation of reciprocal (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>

Copy after login

5. Solve the problem that Firefox does not support 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>

Copy after login

Complete code with 3 Recommended learning with 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>

Copy after login

: Html video tutorial

The above is the detailed content of HTML5 article: 5 ways to achieve page jump (code sharing). For more information, please follow other related articles on the PHP Chinese website!