[SOLUCIONADO] Botón "parar" para un temporizador y recibir una hora

OPMUANRK · #1 (**permalink**) 02/08/2015, 18:53

Hola, me encontré un código de Javascript de un temporizador, le cambié para que empezara al darle clic a un botón, pero quiero que también tenga un botón de "parar/reiniciar", y también que reciba horas por un campo de texto en vez desde el código, aquí está el código:

Código Javascript:

Ver original<script language="javascript">
//Variables que determinan el total de horas, minutos y segundos para la cuenta atrás
toHour=1;
toMinute=0;
toSecond=0;
 
//Cuenta atrás
function countDown()
{
toSecond=toSecond-1;
if(toSecond<0)
{
toSecond=59;
toMinute=toMinute-1;
}
form.second.value=toSecond;
 
if(toMinute<0)
{
toMinute=59;
toHour=toHour-1;
}
form.minute.value=toMinute;
 
form.hour.value=toHour;
if(toHour<0)
{
//Final
form.second.value=0;
form.minute.value=0;
form.hour.value=0;
}else{
setTimeout("countDown()",1000);
}
}
</script>

Y aquí el HTML (Incluído en el mismo documento)

Código HTML:

Ver original<style type="text/css">
.form_input
{
font-family: Verdana;
font-size: 12;
color: #ffffff;
border-width: 0;
background-color: #000077;
text-align: right;
}
</style>
</head>
 
<body>
<form name="form">
Tiempo restante: 
<input type="text" size="5" class="form_input" name="hour" disabled>:
<input type="text" size="5" class="form_input" name="minute" disabled>:
<input type="text" size="5" class="form_input" name="second" disabled>
<input type="button" name="empezar" id="empezar" value="Empezar" onclick="countDown()"/>
</form>

¿Alguien que me ayude? :DD

Gracias

Alexis88 · #2 (**permalink**) 02/08/2015, 19:00

Puedes detener el proceso con el método clearTimeout. Lee la documentación para que veas cómo implementarlo.

Lo otro puedes hacerlo utilizando una función que se ejecute ya sea cuando se escriba el dato en el campo o pulsando un botón. Busca en la web información sobre los eventos oninput y onclick.

Saludos

OPMUANRK · #3 (**permalink**) 02/08/2015, 19:12

Gracias Alexis, checaré el enlace, y mientras, lo de los valores, lo i tenté hacer con un textfield y un botón, y que en la línea donde está la variable "toHour" obtenga su valor con un getElementbyId[...] y no lo tomó (y sí, al botón le dí el valor para que funcionara según yo) así que busqué pero nadie hace algo igual, jajaja

Alexis88 · #4 (**permalink**) 02/08/2015, 19:50

Lo segundo no es difícil:

Código HTML:

Ver original<input type = "text" id = "foo" value = "bar" />
<button onclick = "valor('foo')">Mostrar valor</button>

Código Javascript:

Ver originalfunction valor(id){
    var elValor = document.getElementById(id).value;
    alert(elValor); //Para este ejemplo, mostrará "bar"
}

Saludos

OPMUANRK · #5 (**permalink**) 02/08/2015, 19:57

Gracias Alexis, probaré ese código tan pronto llegue a casa :D

OPMUANRK · #6 (**permalink**) 03/08/2015, 00:01

No me funcionó, la variable "toHour" no toma ningún valor...

Alexis88 · #7 (**permalink**) 03/08/2015, 09:54

Algo estarás haciendo mal. Vuelve a revisar tu código y corrige el problema, esa ya es tarea tuya.

OPMUANRK · #8 (**permalink**) 04/08/2015, 21:52

Ya ha quedado, por si alguien quiere saber:

En javascript, la variable "toHour" será cambiada en el inicio:

Código Java:

Ver originalvar toHour;
onload=function(){
    var hora=document.getElementsByName('horas')[0];    
    toHour=hora.value;
    hora.onchange=arguments.callee;
}

Se le agrega "var" para que pueda reconocerla como variable, y después se le agrega una función, va a tomar el valor de un campo de texto y se le asignará ese valor a la variable "toHour":

Código HTML:

Ver originalHoras deseadas:
<input type = "text" id = "hora" name="horas" autocomplete="off" size="10"/>

¡Y listo! Le doy clic en "Empezar" y ya se ponen.

Alexis88 · #9 (**permalink**) 05/08/2015, 00:39

Enhorabuena por haber logrado resolver tu problema. Te dejo +1 por lograrlo y compartir la respuesta.

Solo para seguir con las recomendaciones del estándar ECMAScript, te daré un par de sugerencias:

Ya no utilices arguments.callee pues su uso ya no es recomendado. En su lugar, usa una función nombrada.

Código Javascript:

Ver originalfunction nombreDeLaFunción(){
    /* Instrucciones */
}

Y para delegar eventos, utiliza el método .addEventListener(). La forma que usas tiene la ventaja de ser cross-browser, pero el estándar ahora recomienda usar el método que te mencioné y que tiene una manera de implementarse para ser cross-browser.

Código Javascript:

Ver originalelemento.addEventListener("evento", función, captura /* Se recomienda que sea false */);

Cualquier duda, consulta los enlaces que dejé; ahí está todo.

Saludos

OPMUANRK · #10 (**permalink**) 05/08/2015, 01:03

Gracias Alexis, lo tomaré en cuenta :)