JavaScript minute and second countdown timer implementation method_javascript skills

The example in this article describes the implementation method of JavaScript countdown timer. Share it with everyone for your reference. The specific analysis is as follows:

1. Basic goals

Design a countdown timer in JavaScript that will make the button unclickable once the time is up

The specific effect is as shown below. In order to illustrate the problem, the table is adjusted to jump every 50 milliseconds, that is, every 0.05.

When actually using it, just adjust setInterval("clock.move()",50); in window.onload=function(){...} from 50 to 1000.

The button can still be clicked before time runs out.

After the time runs out, the button cannot be clicked.

2. Production process

Copy code The code is as follows:

Remaining time:



<script> <br> /*Declare the function to be used by the main function*/ <br> var clock=new clock(); <br> /*Pointer to timer*/ <br> var timer; <br> window.onload=function(){ <br> /*The main function just calls the move method in the clock function every 50 seconds*/ <br> Timer=setInterval("clock.move()",50); <br> }  <br> function clock(){ <br> /*s is a variable in clock(), not a global variable like var, which represents the remaining seconds*/ <br> This.s=140; <br> This.move=function(){ <br> ​​​​/*Call the exchange function to convert seconds to minutes before output. Because exchange is not used in the main function window.onload, there is no need to declare it*/ <br>           document.getElementById("timer").innerHTML=exchange(this.s); <br> ​ ​ ​ /*Each time it is called, the remaining seconds will be decremented*/  <br> This.s=this.s-1; <br>                                                          /*If the time runs out, then a pop-up window will pop up, making the button unavailable, and stop calling move() in the clock function*/ <br> If(this.s<0){ <br /> alert("Time's up"); <br />                document.getElementById("go").disabled=true; <br />                                                                                               ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                                                                                                                                                                                                                           }  <br /> function exchange(time){ <br /> /*Javascript's division is floating point division, and Math.floor must be used to get the integer part*/ <br /> This.m=Math.floor(time/60); <br />               /*There is a remainder operation*/ <br /> This.s=(time`); <br /> This.text=this.m "minutes" this.s "seconds"; <br />                       /*Do not use this for the passed formal parameter time, and other variables used in this function must use this*/ <br />            return this.text;                                     } <br /> </script>


I hope this article will be helpful to everyone’s JavaScript programming design.