Countdown

Question

Countdown

Navigation

#1 by (2 votes)

0

Good afternoon, I want to add a countdown timer on my page, which at the end of the screen will send a warning that the time has expired.

Is it possible to do this with html? I have no idea.

php html

asked by anonymous 08.11.2017 / 17:00

1 answer

doubts about the variable session_start () Simple problem with CSS alignment

score 2 · Accepted Answer

var configMinuto;
    var configSegundo;
    var mostrarValor;
    var evento = null;
    var contador = null;
    var minuto = 0;
    var segundo = 0;

    function IniciarCronometro(valor){
    	this.evento = valor;
    	this.configMinuto = document.getElementById('min').value;
    	this.configSegundo = document.getElementById('seg').value;
    	this.mostrarValor = document.getElementById('mostrarValor');
    	
    	
    	if (evento=="start"){
    		if(!document.getElementById('min').readOnly){
    			if(!this.validarNumero(this.configMinuto)){
    				alert("Campo minuto não é um número!");
    				return;
    			}
    			if(!this.validarNumero(this.configSegundo) || document.getElementById('seg').value > 59){
    				alert("Campo segundo não é um número válido (0 a 59)!");
    				return;
    			}
    			
    			document.getElementById('min').readOnly = true;
    			document.getElementById('seg').readOnly = true;
    			this.minuto = document.getElementById('min').value;
    			this.segundo = document.getElementById('seg').value;
    			
    			document.getElementById('mostrarValor').classList.remove('mostrarValor');
    			document.getElementById('mostrarValor').classList.add('mostrarValor2');
    			document.getElementById('exibe').classList.remove('Classexibe');
    			document.getElementById('exibe').classList.add('Classexibe2');
    			
    		}else{
    			if(this.segundo == 0 && this.minuto != 0){
    				this.segundo = 59;
    				this.minuto--;
    			}else{
    				this.segundo--;
    			}
    			if(this.minuto == 0 && this.segundo == 0){
    				document.getElementById('min').readOnly = false;
    				document.getElementById('seg').readOnly = false;
    				this.mostrarValor.value = "03:00";
    				
    				document.getElementById('mostrarValor').classList.remove('mostrarValor2');
    				document.getElementById('mostrarValor').classList.add('mostrarValor');
    				document.getElementById('exibe').classList.remove('Classexibe2');
    				document.getElementById('exibe').classList.add('Classexibe');
    			
    				clearTimeout(this.contador);
    				return;
    			}	
    			
    			novoMinuto = null;
    			novoSegundo = null;
    			if(this.minuto <= 9){
    				novoMinuto = "0" + this.minuto;
    			}else{
    				novoMinuto = this.minuto;
    			}
    			if(this.segundo <= 9){
    				novoSegundo = "0" + this.segundo;
    			}else{
    				novoSegundo = this.segundo;
    			}
    			this.mostrarValor.value = novoMinuto + ":" + novoSegundo;
    		}
    	}
    	clearTimeout(this.contador);
    	this.contador = setTimeout('IniciarCronometro(evento)', 1000);
    }

    function validarNumero(valor){
    	return !isNaN(parseFloat(valor)) && isFinite(valor);
    }

html, body {
	height: 99%;
}
body {
	background-color: #f0f0f0;
}
.mostrarValor{
	text-align: center;
	border:0px solid white;
	font-size: 50pt;
}
.mostrarValor2{
	text-align: center;
	border:0px solid white;
	font-size: 50pt;
	animation: fade 10000ms infinite;
}

.Classexibe, .Classexibe2{
	text-align:center;
}

section {
	width: 450px;
}

.btn {
	
	width:100px;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>CRONÔMETRO</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" lang="javascript" src="script.js"></script>
</head>

<body>
	<section>
			<fieldset class="Classexibe" id="exibe">
				<p><input class="mostrarValor" type="text" id="mostrarValor" size="2" readonly="readonly" value="03:00"/></p>
				<input type="hidden" id="min" size="2" maxlength="3" value='3'/>
				<input type="hidden" id="seg" size="2" maxlength="2" value='0' />
			        <input class="btn" type="button" value="INICIAR" id="btnIniciar" onclick="IniciarCronometro('start')"> 
			</fieldset>
	</section>
</body>
</html>