Home  >  Article  >  Web Front-end  >  Javascript implements countdown jump page_javascript skills

Javascript implements countdown jump page_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:19:381095browse
Many web pages have similar effects, that is, they can jump to other pages after a specified time. If it is more humane, it will have a countdown effect. This chapter will introduce how to achieve this effect. The code example is as follows :

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="http://www.jb51.net";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";
 t--;
} 
</script> 
<span id="show"></span> 
The above code achieves the effect we want, and can jump to the specified page after 10 seconds. The implementation process is introduced below.
1. Implementation principle:
The principle is very simple, that is, use the setInterval() timer function to execute the refer() function once every second. This function can reduce t by 1 without executing it once, and at the same time write the current t value into the div. If When t decreases to 0, that is, the countdown is completed, it will jump to the specified page. The principle is roughly the same.
2. Related reading:
1. For the setInterval() function, please refer to the chapter setInterval() Detailed explanation of function usage.
2.location.href can be found in the href attribute of the Location object chapter.
3. For the innerHTML attribute, please refer to the usage chapter of the innerHTML attribute of js.

Let me share with you two simple jump codes and summarize them. Various timed jump codes are recorded as follows:

(1) Use the setTimeout function to implement timing jumps (the following code should be written in the body area)

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='http://www.jb51.net',3); 
</script> 

(2) HTML code implementation, add the following code in the head area block of the page

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=http://www.jb51.net" /> 

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