Gente, estou criando um cronômetro regressivo acompanhado dos botões (iniciar, pausar, resetar, reiniciar e salvar tempo) sendo que o tempo inicial é definido num input também.
Procurei diversas vezes em diversas postagens no pt.stackoverflow e em outros fóruns da internet, achei no máximo cronômetros regressivos, mas não com as mesmas funcionalidades e apesar de ter tentado adaptar não consegui. Em nosso fórum só se encontra perguntas parecidas, mas a linguagem não é a mesma e quando é (js puro), a finalidade é muito diferente.
Meu código está com problema de contagem, já observei problemas quando são mais que 10 minutos ou menos que 1. Gostaria de uma resolução em JS Puro! Observe o código:
Javascript
function transporta(mensagem){
var docsetmin = document.getElementById('setminutos');
var docsetsec = document.getElementById('setsegundos');
var docrestamin = document.getElementById('restamin');
var docrestasec = document.getElementById('restasec');
if(docsetsec.value <= 59){
docrestamin.value = docsetmin.value;
docrestasec.value = docsetsec.value;
setTimeout(cronometro, 1000, 'start');
}
else{
alert('Há problemas com o tempo configurado!');
}
}
function cronometro(option, message){
var docsetmin = document.getElementById('setminutos');
var docsetsec = document.getElementById('setsegundos');
var docrestamin = document.getElementById('restamin');
var docrestasec = document.getElementById('restasec');
var docsetminval = docsetmin.value;
var docsetsecval = docsetsec.value;
var docrestaminval = docrestamin.value;
var docrestasecval = docrestasec.value;
if(option == 'start'){
start(message);
}
if(option == 'pause'){
docrestamin.placeholder = docrestamin.value;
docrestasec.placeholder = docrestasec.value;
alert('Cronômetro Pausado');
docrestamin.value = '--';
docrestasec.value = '--';
document.getElementById('paused').innerHTML = 'Pausado em: ' + docrestamin.placeholder + ':' + docrestasec.placeholder + '.';
}
if(option == 'reset'){
docsetmin.value = '00';
docsetsec.value = '00';
docrestamin.value = '00';
docrestasec.value = '00';
docrestamin.placeholder = '';
docrestasec.placeholder = '';
docsetmin.placeholder = '';
docsetsec.placeholder = '';
}
if(option == 'resume'){
document.getElementById('paused').innerHTML = '';
docrestamin.value = docrestamin.placeholder;
docrestasec.value = docrestasec.placeholder;
cronometro('start', message);
}
if(option == 'save'){
alert(docsetmin.value + ':' + docsetsec.value);
}
}
function start(alerta){
var docsetmin = document.getElementById('setminutos');
var docsetsec = document.getElementById('setsegundos');
var docrestamin = document.getElementById('restamin');
var docrestasec = document.getElementById('restasec');
/* Se for mais que 10 minutos */
if(docrestamin.value > 10){
/* Se for mais que 10 segundos */
if((docrestasec.value <= 59) && (docrestasec.value > 10)){
docrestasec.value = docrestasec.value - 1;
setTimeout(start, 1000);
}
/* Se for menor ou igual a 10 segundos e mais que 0 segundos */
if((docrestasec.value <= 10) && (docrestasec.value > 0)){
var ts = docrestasec.value - 1;
docrestasec.value = '0' + ts;
setTimeout(start, 1000, 'start');
}
/* Se for menor ou igual a 0 segundos */
if(docrestasec.value <= 0){
docrestasec.value = '59';
docrestamin.value = docrestamin.value - 1;
setTimeout(start, 1000, 'start');
}
}
/* Se for menor ou igual a 10 minutos e mais que 0 minutos */
if((docrestamin.value <= 10) && (docrestamin.value > 0)){
/* Se for mais que 10 segundos */
if((docrestasec.value > 10) && (docrestasec.value <= 59)){
docrestasec.value = docrestasec.value - 1;
setTimeout(start, 1000, 'start');
}
/* Se for menor ou igual a 10 segundos e mais que 0 segundos */
if(docrestasec.value <= 10 && docrestasec.value > 0){
var ts = docrestasec.value - 1;
docrestasec.value = '0' + ts;
setTimeout(start, 1000, 'start');
}
/* Se for menor ou igual a 0 segundos */
if(docrestasec.value <= 0){
var tm = docrestamin.value - 1;
docrestamin.value = '0' + tm;
docrestasec.value = 59;
setTimeout(start, 1000, 'start');
}
}
/* Se for menor ou igual a 0 minutos */
if(docrestamin.value <= 0){
/* Se for mais que 10 segundos */
if((docrestasec.value <= 59) && (docrestasec.value > 10)){
docrestasec.value = docrestasec.value - 1;
setTimeout(start, 1000, 'start');
}
/* Se for menor ou igual a 10 segundos e mais que 0 segundos */
if((docrestasec.value <= 10) && (docrestasec.value > 0)){
var ts = docrestasec.value - 1;
docrestasec.value = '0' + ts;
setTimeout(start, 1000, 'start');
}
/* Se for menor ou igual a 0 segundos */
if(docrestasec.value <= 0){
if((docrestamin.value = '00') && (docrestasec.value = '00')){
alert('O tempo acabou!');
}
}
}
}
function Onlynumbers(){
var tecla = event.keyCode;
if((tecla >= "48") && (tecla <= "57") && (tecla = "186")){
return true;
}
else{
return false;
}
}
CSS3
body{padding: 20%;}
header{text-align: center;}
section{align-items: center; justify-content: center; display: flex; vertical-align: middle;}
.btn{color: black; border: none; background-color: white; margin-left: 0.5%; margin-right: 0.5%; text-align: center;}
.border{border: 1px solid black;}
.border{transition: background-color 0.4s ease-in 0.2s; transition: color 0.01s ease-in;}
.border:hover{background-color: #1397D4; color: white;}
HTML
<!-- Cronômetro Regressivo -->
<header>
<p><h1>Cronômetro Regressivo</h1></p>
</header>
<br>
<section>
<input placeholder="m" class="btn" id="setminutos" type="text" name="minutos" size="2" maxlength="2" onkeypress="return Onlynumbers()">
:
<input placeholder="s" class="btn" id="setsegundos" maxlength="2" type="text" name="segundos" size="2" onkeypress="return Onlynumbers()">
<button id="comece" class="btn border" type="button" onclick="transporta()">Iniciar</button>
<button class="btn border" onclick="cronometro('pause');">Pausar</button>
<button class="btn border" onclick="cronometro('reset')">Resetar</button>
<button class="btn border" onclick="cronometro('resume')">Reiniciar</button>
<button class="btn border" onclick="cronometro('save')">Salvar Tempo</button>
<input class="btn dnone" id="restamin" type="text" name="minutosresta" size="2" maxlength="2" onkeypress="return Onlynumbers()">
<div class="dnone">:</div>
<input class="btn dnone" id="restasec" maxlength="2" type="text" name="segundosresta" size="2" onkeypress="return Onlynumbers()">
<div id="paused" class="dnone"></div>
</section>