Home > Web Front-end > JS Tutorial > Implementing scheduled jumps to specified pages based on JavaScript_javascript skills

Implementing scheduled jumps to specified pages based on JavaScript_javascript skills

WBOY
Release: 2016-05-16 15:22:32
Original
1800 people have browsed it

In some scenarios, the webpage needs to be able to automatically jump to the specified page after a specified time. For example, if the specified webpage cannot be found, the previously set 404 page will be displayed and jump to For the specified page, the following is a piece of code to achieve this effect.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wwww.jb51.net';
} 
else
{
if(navigator.appName.indexOf("Explorer")>-1)
{
document.getElementById('totalSecond').innerText=second--;
} 
else
{
document.getElementById('totalSecond').textContent=second--;
}
}
}
window.onload=function()
{
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);
}
</script>
</head>
<body>
<h1>找不到指定的页面</h1>
<span id="totalSecond">3</span>秒后自动跳转到指定页面
</body>
</html>
Copy after login

The above code can jump to the specified page after three seconds. The following is a brief introduction to the implementation process.

1. Implementation principle:

Use the timer function to modify the number in the span element every second. When the number reaches zero, the page will jump to the specified link. The principle is roughly the same. I won’t introduce it here. Specifically, you can See code comments.

2. Code comments:

1.function redirect(){}, declare an ambiguity for jump.
2.if(second<0) {location.href='http://wwww.jb51.net';} , if the number is less than zero, it will jump.
3.else{}, otherwise the countdown effect will be performed.
4.if(navigator.appName.indexOf("Explorer")>-1), determine whether it is IE browser.
5.document.getElementById('totalSecond').innerText=second--, if it is an IE browser, use the innerText attribute to set the numeric value in the span element.
6.document.getElementById('totalSecond').textContent=second--, other browsers use the textContent attribute to set the numeric value in the span element.
7.window.onload=function(){}, when the document is completely loaded, execute the code in the function.
8.if(navigator.appName.indexOf("Explorer")>-1){}, if it is an IE browser, use the innerText attribute to obtain the content in the span element.
9.second = document.getElementById('totalSecond').textContent, other standard browsers use the textContent attribute to obtain the span element value.
10.setInterval("redirect()",1000), executes the timer function every second.

3. Related reading:

1. The indexof() function can be found in the chapter Detailed explanation of the use of lastIndexOf() method in JavaScript .
2. For the setInterval() function, please refer to the chapter Usage and Differences between setInterval() and setTimeout()Example Introduction.

The above content is the entire description of how to implement scheduled jumps to specified pages based on JavaScript shared by the editor. I hope you like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template