Javascript implements countdown jump page_javascript skills

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" />