A simple method to implement a timer using javascript.

A simple method to implement a timer using javascript.

Timer is also frequently used in life, such as exercise, running, and other related activities. We use Javascript to complete a timer.

A timer is a logical processing of time. For example, 60 seconds equals 1 minute, and 60 minutes equals 1 hour. Here we only process the timer for an hour. such a simple logic is then dynamically displayed in an Input.

Now let's complete this interface.

<Label> timing: </label> <input type = "text" name = "" id = "timer"/> <button onclick = "pause (this) "id =" pause "state =" on "> pause </button> <button onclick =" restart () "> Start again </button>

An ID is assigned to the Tag Element to obtain the tag. Two click events are added, the counter is paused, and the event is restarted.

First, we can start the timer processing. We still use the setInterval method to start the timer, where the method is executed every 1 second, so that we can process the time, as the saying goes, 60 seconds equals 1 minute ..., so here we need to use the judgment to handle it. At last, we will display the second and minute in the input box.

Var ele_timer = document. getElementById ("timer"); var n_sec = 0; // second var n_min = 0; // minute var n_hour = 0; // hour // 60 seconds ==== 1 minute // 60 Minutes === 1 hour function timer () {return setInterval (function () {var str_sec = n_sec; var str_min = n_min; var str_hour = n_hour; if (n_sec <10) {str_sec = "0" + n_sec;} if (n_min <10) {str_min = "0" + n_min;} if (n_hour <10) {str_hour = "0" + n_hour;} var time = str_hour + ":" + str_min + ": "+ str_sec; ele_timer.value = time; n_sec ++; if (n_sec> 59) {n_sec = 0; n_min ++;} if (n_min> 59) {n_sec = 0; n_hour ++ ;}}, 1000) ;}var n_timer = timer ();

We use the timer method to wrap the setInterval method in order to pause and re-start processing later.
When a user clicks pause, the timer stops timing. The user continues to click this button, and the timer continues timing. Therefore, there is a state to be controlled. This State gives this button an attribute.

// Pause and continue function pause (self) {var state = self. getAttribute ("state"); if (state = "on") {clearInterval (n_timer); self. textContent = "continue"; self. setAttribute ("state", "off");} else {n_timer = timer (); self. textContent = "pause"; self. setAttribute ("state", "on ");}}

Finally, let's take a look at the restart to make it easier to restart the event. Clear the counter to 0 and change the initial status of the pause button.

Function restart () {clearInterval (n_timer); n_sec = 0; n_min = 0; n_hour = 0; n_timer = timer (); var ele_pause = document. getElementById ("pause"); ele_pause.textContent = "pause"; ele_pause.setAttribute ("state", "on ");}

This completes the timing function. The effect is as follows:

I hope this article will help you learn about javascript programming.

Articles you may be interested in:

• VB countdown timer and current JS time
• JS page timer sample code
• Usage of javascript timer events
• Detailed description of using timer to execute functions in Node. js
• Implementation of the JavaScript minute-second countdown timer
• JavaScript timer Example Analysis
• Javascript timer details
• Simple timer implemented by javascript
• Simple stopwatch timer with javascript Design