Countdown

Asked

Viewed 248 times

0

Good afternoon, I want to add on my page a countdown, which at the end only emits a warning saying that the time has expired.

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

php html web-application

  • javascript and php could do this along with html

1 answer

2


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>

  • Thanks! Only a doubt...the first block starts straight so "var configMinuto;"?

  • 1

    was this way ? , Well the first block comes inside a <script> tag and when the code ends close the script tag. the second code needs to be saved in file extension . CSS because it is a style, and the third is an HTML file. And yes, it starts there in var configMinuto.

  • In case I only need msm of the counter itself, but I try to take these fields Minutes and Seconds

  • 1

    @Freitas olitas will be necessary to take what is inside the body at least, for you to have the code efficiently

  • Without wanting to abuse, you would know to tell me at the moment that page is opened the chronometer already begins to rotate?

  • @Freitas You will have to put the id and the onClick event on the login button

  • Let’s go continue this discussion in chat.

  • <Section> <article> <fieldset class="Classdisplays" id="displays"><Legend></Legend> <p><input class="showValor" type="text" id="onClick" size="2" readonly="readonly" value="03:00"/></p> </article> <</Section> so?

  • copy the <Section> tag and everything inside it I edited the code making it very simple now, remembering that ... should copy up to the </Section>

  • Thank you very much! but what I tried to say was that at the moment the page is loaded the chronometer already starts to run, without having to click a start button.

  • 1

    then and I replied, for this to happen you must copy the ID and the onclick event from the start button and put on some button, either on the login button or it can be also on some link

Show 6 more comments

Browser other questions tagged php html web-application

You are not signed in. Login or sign up in order to post.