HTML & Javascript Countdown

Asked

Viewed 983 times

0

So guys, I want to do a countdown that you report the time you entered the location, and it adds up for six hours and 20 minutes, and tells you the time you’re going out and takes that time and subtracts it by the current time of the computer and plays the countdown counter. In my current code I have a clock that pulls the current computer time and a countdown that you tell the time and it regresses, so my problems are as follows:

1 - My counter does not support hours, only minutes and seconds.
2 - I don’t know how to add up the informed time of the set time of 06:20:00hrs and then show somewhere on this page this time.
3 - I don’t know how to subtract the time that the person will leave the current time of the computer and play that time pro counter.

<HTML>
<HEAD>
<TITLE>Contagem Regressiva</TITLE>
</HEAD>
<BODY>
<CENTER>
<FORM name="sw">
	<TABLE border="0" width="100%">
		<tr align="center">
			<td>
				<table border="3" width="30%">
					<tr align="center">
						<td>
							<SPAN ID="Clock"></SPAN>
							<br>
							<input type="text" name="beg2" size="7" value="00:05">
						</td>
						<td>
							<input type="button" value="Iniciar" onclick="Down()">
						</td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<input type="text" name="disp2" size="20">
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</TABLE>
</FORM>
</CENTER>

<SCRIPT LANGUAGE="JavaScript">

	var Elem = document.getElementById("Clock");
	function Horario(){
		var Hoje = new Date();
		var Horas = Hoje.getHours();
		if(Horas < 10){
			Horas = "0"+Horas;
		}
		var Minutos = Hoje.getMinutes();
		if(Minutos < 10){
			Minutos = "0"+Minutos;
		}
		var Segundos = Hoje.getSeconds();
		if(Segundos < 10){
			Segundos = "0"+Segundos;
		}
		Elem.innerHTML = Horas+":"+Minutos+":"+Segundos;
	}
	window.setInterval("Horario()",1000);


	var down;
	var cmin2,csec2;
	function Minutes(data) {
		for(var i=0;i<data.length;i++)
		if(data.substring(i,i+1)==":")
		break;
		return(data.substring(0,i));
	}

	function Seconds(data) {
		for(var i=0;i<data.length;i++)
		if(data.substring(i,i+1)==":")
		break;
		return(data.substring(i+1,data.length));
	}

	function Display(min,sec) {
		var disp;

		if(min<=9){
			disp=" 0";
		}else{
			disp=" ";
		}

		disp+=min+":";

		if(sec<=9){
			disp+="0"+sec;
		}else{
			disp+=sec;
		}

		return(disp);
	}

	function Down() {
		cmin2=1*Minutes(document.sw.beg2.value);
		csec2=0+Seconds(document.sw.beg2.value);
		DownRepeat();
	}

	function DownRepeat() {
		csec2--;
		if(csec2==-1) {
			csec2=59;
			cmin2--;
		}

		document.sw.disp2.value=Display(cmin2,csec2);
		if((cmin2==0)&&(csec2==0)){
			alert("Acabou a Contagem!!!");
		}else{
			down=setTimeout("DownRepeat()",1000);
		}
	}
</SCRIPT>

</BODY>
</HTML>

javascript html

  • It’s not very clear what you want to do. You want a counter where the person puts the time that entered and it informs the user the time that this will leave, at the same time it makes a Countdown to alert the guy at the time that he is leaving that gave 6 hours and 20? Got a little confused

  • Exactly as you explained Máttheus Spoo, in addition to showing the time(fixed) that the person will leave, he makes a countdown of how much time is left.

  • How so the user will inform the date he entered? He may be wrong in typing. Do not think it better javascript catch the time he entered?

  • Welcome Ramon Martins, if any answer to any of your questions solves your problem be sure to mark it as accepted. See how in https://i.stack.Imgur.com/jx7Ts.png and why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079 Enjoy a tour of the Sita https://answall.com/tour

1 answer

2

See if it solves:

    //para contagem regressiva minutos = 380 = 6 horas e 20 minutos
    var data = new Date(),
        minutos = 380;
    // acrescentando 380 minutos a data
    data.setMinutes(data.getMinutes() + minutos);  

    // apresenta no input id disp2 data e hora de saida  
    document.getElementById('disp2').value = "Até " + data.toLocaleString();
      
    function atualizaContador() {
      var hoje = new Date();
      var ss = parseInt((data-hoje) / 1000);

      var mm = parseInt(ss / 60);
      var hh = parseInt(mm / 60);
      var dd = parseInt(hh / 24);
       ss = ss - (mm * 60);
      mm = mm - (hh * 60);
      hh = hh - (dd * 24);
       var faltam = '';
      faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
      faltam += (toString(hh).length) ? hh+' hr, ' : '';
      faltam += (toString(mm).length) ? mm+' min e ' : '';
      faltam += ss+' seg';
        if (dd+hh+mm+ss > 0)  {
             document.getElementById('contador').value = faltam;
             setTimeout(atualizaContador,1000);
        } else {
             document.getElementById('contador').value = 'Acabou a Contagem!!!';
             alert("Acabou a Contagem!!!");
        }
    }
    atualizaContador();

      //para o relogio
    	var Elem = document.getElementById("Clock");
    	function Horario(){
    		var Hoje = new Date();
    		var Horas = Hoje.getHours();
    		if(Horas < 10){
    			Horas = "0"+Horas;
    		}
    		var Minutos = Hoje.getMinutes();
    		if(Minutos < 10){
    			Minutos = "0"+Minutos;
    		}
    		var Segundos = Hoje.getSeconds();
    		if(Segundos < 10){
    			Segundos = "0"+Segundos;
    		}
    		Elem.innerHTML = Horas+":"+Minutos+":"+Segundos;
    	}
    	window.setInterval("Horario()",1000);
    <FORM name="sw">
    	<TABLE border="0" width="100%">
    		<tr align="center">
    			<td>
    				<table border="3" width="30%">
    					<tr align="center">
    						<td>
    							<SPAN ID="Clock"></SPAN>
    							<br>
    							<input type="text"id="contador" name="beg2" size="30" value="00:05" style="text-align:center;">
    						</td>
    					</tr>
    					<tr align="center">
    						<td>
    							<input type="text" id="disp2" name="disp2" size="20" style="text-align:center;">
    						</td>
    					</tr>
    				</table>
    			</td>
    		</tr>
    	</TABLE>
    </FORM>

Browser other questions tagged javascript html

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