Home >Web Front-end >HTML Tutorial >HTML5 article: 5 ways to achieve page jump (code sharing)
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.
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='hello.html'; // 以下方式定时跳转 setTimeout("javascript:location.href='hello.html'", 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='hello.html'; } </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('totalSecond').textContent; setInterval("redirect()", 1000); function redirect() { document.getElementById('totalSecond').textContent = --second; if (second < 0) location.href = 'hello.html'; } </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('totalSecond').innerText = "my text innerText"; } else{ document.getElementById('totalSecond').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('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 = 'hello.html'; } else { if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('totalSecond').innerText = second--; } else { document.getElementById('totalSecond').textContent = second--; } } } </script>
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!