search

Home  >  Article  >  Web Front-end  >  HTML5 article: 5 ways to achieve page jump (code sharing)

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

奋力向前
奋力向前forward
2021-08-16 15:33:017807browse

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>

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>

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>

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>

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>

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>

: 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!

JavaScript html5 firefox css html struts
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to achieve centering effect in html web pages (code sharing)Next article：How to achieve centering effect in html web pages (code sharing)

Related articles

See more