A simple way to implement a timer in JavaScript _javascript tips

The timer, in the life is also uses frequently the function, for example exercises the body, the running race and so on related activity. We use JavaScript to complete a timer.

Timer, the main is a logical processing of time, such as 60 seconds equals 1 minutes, 60 minutes equals one hours, we only do the processing hours. Just such a simple logic, then dynamically displayed in an input.

So now we're done with this interface.

<label> timing:</label> 
<input type= "text" name= "id=" Timer "/> 
<button onclick=" Pause ( This) "id=" Pause "state=" on "> Pause </button>
<button onclick=" restart () "> re-start </button>

Give the tag element an ID to get the tag, then add two click events, pause the counter, and restart the event.

First, we'll finish the process of starting the timer, the beginning of the time is mainly the use of the SetInterval method, which every 1 seconds to perform a method, so that we can do the processing, as the opening said 60 seconds equals 1 minutes ..., so here is to use judgment to deal with, Finally, the resulting seconds and minutes are displayed in the input box.

var Ele_timer = document.getElementById ("timer");
var n_sec = 0; Second
var n_min = 0;//cent
var n_hour = 0;//

//60 seconds = 1 min
//60 min = 1 hours
function timer () {return
 SE Tinterval (function () {

  var str_sec = n_sec;
  var str_min = n_min;
  var str_hour = N_hour;
  if (N_sec <) {
   str_sec = "0" + n_sec;
  }
  if (N_min <) {
   str_min = "0" + n_min;
  }

  if (N_hour <) {
   Str_hour = "0" + n_hour;
  }

  var time = Str_hour + ":" + str_min + ":" + str_sec;
  Ele_timer.value = time;
  n_sec++;
  if (N_sec >) {
   n_sec = 0;
   n_min++;
  }
  if (N_min >) {
   n_sec = 0;
   n_hour++
  }


 }, 1000);

var N_timer = timer ();

We use the Timer method to wrap the SetInterval method so that the back is paused and the process starts again.
The user clicks on the pause, the timer stops ticking, the user continues to click on the button, and the timer continues to clock. So here's a state that needs to be controlled, and this state we give this button an attribute.

Pause and resume
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 a new start, and it's much simpler to start again. Clear the counter to 0, then change the pause button's initial state.

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 timer function. The effect is as follows

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