├── README.md
├── cron.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Cronometro JS
2 |
3 | ### Esse script faz parte de uma videoaula publicada no canal SatellaSoft, que por sua vez, ensina a como criar um cronometro com Javascript.
4 |
5 | > Youtube vídeo: https://youtu.be/QSW1374FCt4
6 |
7 | > SatellaSoft: https://satellasoft.com
8 |
9 | # Modo de utilização
10 |
11 | > Não será descrito a funcionalidade de cada linha, pois no arquivo cron.js, está completamente comentado, então, abaixo você confere as funções necessárias para iniciar, pausar e parar o contador.
12 |
13 | Incorpore o script cron.js a sua página HTML, recomendamos colocar antes do fechamento da tag body.
14 |
15 | ```html
16 |
17 |
18 | ```
19 |
20 | Chame uma das funções abaixo para executar determinada ação.
21 |
22 | ### Iniciar o contador
23 |
24 | ```javascript
25 | start();
26 | ```
27 |
28 | ### Pausar o contador
29 |
30 | ```javascript
31 | pause();
32 | ```
33 |
34 |
35 | ### Parar o contador
36 |
37 | ```javascript
38 | stop();
39 | ```
40 |
41 | A função timer é responsável por calcular o tempo, ela possui ainda, uma instrução para exibir o resultado em um elemento cujo atributo o ID é **counter**. Está função retorna também, o valor devidamente formatado, caso você precise utilizar em outro lugar.
42 |
--------------------------------------------------------------------------------
/cron.js:
--------------------------------------------------------------------------------
1 | "use strict"
2 |
3 | var hh = 0;
4 | var mm = 0;
5 | var ss = 0;
6 |
7 | var tempo = 1000;//Quantos milésimos valem 1 segundo?
8 | var cron;
9 |
10 | //Inicia o temporizador
11 | function start() {
12 | cron = setInterval(() => { timer(); }, tempo);
13 | }
14 |
15 | //Para o temporizador mas não limpa as variáveis
16 | function pause() {
17 | clearInterval(cron);
18 | }
19 |
20 | //Para o temporizador e limpa as variáveis
21 | function stop() {
22 | clearInterval(cron);
23 | hh = 0;
24 | mm = 0;
25 | ss = 0;
26 |
27 | document.getElementById('counter').innerText = '00:00:00';
28 | }
29 |
30 | //Faz a contagem do tempo e exibição
31 | function timer() {
32 | ss++; //Incrementa +1 na variável ss
33 |
34 | if (ss == 60) { //Verifica se deu 59 segundos
35 | ss = 0; //Volta os segundos para 0
36 | mm++; //Adiciona +1 na variável mm
37 |
38 | if (mm == 60) { //Verifica se deu 59 minutos
39 | mm = 0;//Volta os minutos para 0
40 | hh++;//Adiciona +1 na variável hora
41 | }
42 | }
43 |
44 | //Cria uma variável com o valor tratado HH:MM:SS
45 | var format = (hh < 10 ? '0' + hh : hh) + ':' + (mm < 10 ? '0' + mm : mm) + ':' + (ss < 10 ? '0' + ss : ss);
46 |
47 | //Insere o valor tratado no elemento counter
48 | document.getElementById('counter').innerText = format;
49 |
50 | //Retorna o valor tratado
51 | return format;
52 | }
53 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 5 |
6 |
7 | Cronometro
8 |
9 |
10 |
67 |
68 |