Lionsure
Program development > Javascript > Content

Javascript countdown and redirect after a few seconds

Lionsure 2020-06-25 Original by the website

Javascript implements a countdown to redirect to the specified page. Since variables(such as "jump after a few seconds") that should be defined as arguments of method must be defined as global variables, they cannot be written into a method, which makes the call very inconvenient and the values that are frequently changed cannot be passed with arguments, and the initial value in the code must be changed. For those who do not understand the code, the modification may be wrong, which is very inconvenient to use. Therefore, it is necessary to encapsulate it into an object, define all variables and methods in this object, the values that need to be changed can be defined as the arguments of the method in the object, so that you can avoid modifying the code, just pass the value to be changed to the method of the object.

 

I. Implementation process:

1. First define an object jump, and then define 4 variables, the meaning of the representative, there are comments in the code; Secondly, define an initialization method (init) and a method(show) to display jump prompt information.

2. The init method is responsible for assigning the passed value to the variable of the object and creating a timer(setInterval), which specifies that the "show" method is executed once per second.

3. The "show" method first gets the object(i.e. div tag id=showId) that displays the jump message, and then assigns the remaining jump time, prompt text, and jump URL to the "innerHTML" attribute of the object; then determines whether the remaining jump time is equal to 0, if it is equal to 0, then clear the timer and jump to the specified page; the last is the jump time minus 1(jump.s--).

 

II. The implementation code is as follows:

<html>
       <head>
              <title>Javascript countdown and redirect after a few seconds</title>
              <script language="javascript" type="text/javascript">
                     var jump = {
                            o: null,//Display the object that prompts the jump information(such as "show" in the example)
                            s: 0,//Jump time(unit: seconds)
                            url: "",//Jump URL
                            intervalId: null,//Timing object
                            init: function (obj, time, url) {
                            jump.o = obj;
                            jump.s = time;
                            jump.url = url;
                            jump.intervalId = setInterval("jump.show()", 1000);
                     },
                     show: function () {
                            document.getElementById(jump.o).innerHTML = "Automatically jump to after  " + jump.s + " seconds " + jump.url;

                     if (jump.s == 0) {
                                   clearInterval(jump.intervalId);
                                   window.location = jump.url;
                            }
                            jump.s--;
                     }
              };
              jump.init("showId", 5, "http://www.liangshunet.com/");
              </script>
       </head>        
       <body>        
              <div id="showId"></div>
       </body>
       </html>

Call(Redirect after 5 seconds): jump.init("showId", 5, "http://www.xxx.com/");

 

Arguments description of jump.init(obj, time, url):

obj: Object to display jump prompt information(<div id="showId"></div> in the example);

time: Jump time (unit: second);

url: The URL to be redirected to.

 

 

III. The implementation code of a little higher efficiency:

It is basically the same as the above method, the only difference is: only get the object that displays the prompt jump information(initialized in the init method), and the above method is to get it once every second, the efficiency is basically negligible if the number of seconds is small. The code show as below:

<html>
       <head>
              <title>Javascript redirect after 5 seconds with countdown</title>
              <script language="javascript" type="text/javascript">
                     var jump = {
                            o: null,//Display the object that prompts the jump information(such as "show" in the example)
                            s: 0,//Jump time(unit: seconds)
                            url: "",//Jump URL
                            intervalId: null,//Timing object
                            init: function (obj, time, url) {
                            jump.o = document.getElementById(obj);//Differences from method one (1)
                            jump.s = time;
                            jump.url = url;
                            jump.intervalId = setInterval("jump.show()", 1000);
                     },
                     show: function () {
                            jump.o.innerHTML = "Automatically jump to after " + jump.s + " seconds " + jump.url;//Differences from method one (2)

                     if (jump.s == 0) {
                                   clearInterval(jump.intervalId);
                                   window.location = jump.url;
                            }
                            jump.s--;
                     }
              };
              jump.init("showId", 5, "http://www.xxx.com/");
              </script>
       </head>        
       <body>        
              <div id="showId"></div>
       </body>
       </html>

Pay attention to the problem: the calling code must be placed behind the object that displays the prompt jump information(such as <div id="showId"></div> in the example), otherwise the object cannot be found during initialization.

Article Tags:CountdownRedirectJavascript
Question or Commentary