[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! 😊😊
Top comments (0)