Creating a timer with JavaScript

[Clique aqui para ler em português]

Let’s create a simple timer using just JavaScript and HTML.

Code

First we will create the interface, we will do something simple, using only HTML.

<form name="form_main">
  <div>
    <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>:<span id="millisecond">000</span>
  </div>

  <br />

  <button type="button" name="start">start</button>
  <button type="button" name="pause">pause</button>
  <button type="button" name="reset">reset</button>
</form>

In the HTML structure, some span was created to display the time information, after that we have 3 buttons to control the functionality of the timer.

Now let’s start the JavaScript part.

"use strict";

let hour = 0;
let minute = 0;
let second = 0;
let millisecond = 0;

let cron;

document.form_main.start.onclick = () => start();
document.form_main.pause.onclick = () => pause();
document.form_main.reset.onclick = () => reset();

In this JavaScript code, we define our control variables and associate the functions with their buttons.

Now let’s create the functions.

function start() {
  pause();
  cron = setInterval(() => { timer(); }, 10);
}

function pause() {
  clearInterval(cron);
}

function reset() {
  hour = 0;
  minute = 0;
  second = 0;
  millisecond = 0;
  document.getElementById('hour').innerText = '00';
  document.getElementById('minute').innerText = '00';
  document.getElementById('second').innerText = '00';
  document.getElementById('millisecond').innerText = '000';
}

Here we have the start, pause and reset functions, in the start function, we start the setInterval every 10 milliseconds (because every 1 millisecond locks depending on the browser).

In the pause function we clear the setInterval, in the start function it is necessary to clear before starting so that we don’t have several working in the background, so before starting the procedures, the pause function is called.

In the reset function, we reset our auxiliary variables and so that the text on the screen returns to 0(zero) on the screen, we set it manually using the innerText.

function timer() {
  if ((millisecond += 10) == 1000) {
    millisecond = 0;
    second++;
  }
  if (second == 60) {
    second = 0;
    minute++;
  }
  if (minute == 60) {
    minute = 0;
    hour++;
  }
  document.getElementById('hour').innerText = returnData(hour);
  document.getElementById('minute').innerText = returnData(minute);
  document.getElementById('second').innerText = returnData(second);
  document.getElementById('millisecond').innerText = returnData(millisecond);
}

function returnData(input) {
  return input > 10 ? input : `0${input}`
}

Here we have the final part, the timer function which is called in the start function, in this function we check the time passed:

• If the millisecond added to 10 is equal to 1000, then a second has passed and then we reset the millisecond and increase it by 1 second.
• If the second is equal to 60, then a minute has passed and then we reset the second to 1 minute.
• If the minute is 60, then an hour has passed and then we reset the minute and increase it by one hour.

Finally we print on the screen using innerText.

The returnData function is used only to make the text more dynamic on the screen, making the following logic, if the digit is less than 10 then concatenates with a 0(zero) in front.

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊