Foros del Web » Programando para Internet » Javascript »

Cronometro Javascript

Estas en el tema de Cronometro Javascript en el foro de Javascript en Foros del Web. Que tal amigos quisiera saber si alguien me puede ayudar con un cronometro en javascript tengo todo el codigo listo el unico problema que tengo ...
  #1 (permalink)  
Antiguo 15/01/2015, 11:56
 
Fecha de Ingreso: enero-2015
Mensajes: 3
Antigüedad: 9 años, 6 meses
Puntos: 0
Cronometro Javascript

Que tal amigos quisiera saber si alguien me puede ayudar con un cronometro en javascript tengo todo el codigo listo el unico problema que tengo es que arranca solo y quisiera que arrancara con un boton de iniciar o con un enlace pero no logro hacerlo

si alguien me puede echar una mano se lo agradezco.

Código HTML:
<html>
<head>
</head>

<body>
<h1>Cuenta atras</h1>
<h2 id='CuentaAtras'></h2>

<script language="JavaScript">
<!--
/* Determinamos el tiempo total en segundos */
var totalTiempo=10;

var timestampStart = new Date().getTime();
var endTime=timestampStart+(totalTiempo*1000);
var timestampEnd=endTime-new Date().getTime();

/* Variable que contiene el tiempo restante */
var tiempRestante=totalTiempo;

/* Ejecutamos la funcion updateReloj() al cargar la pagina */
updateReloj();

function updateReloj() {

   var Seconds=tiempRestante;
   
   var Days = Math.floor(Seconds / 86400);
   Seconds -= Days * 86400;

   var Hours = Math.floor(Seconds / 3600);
   Seconds -= Hours * (3600);

   var Minutes = Math.floor(Seconds / 60);
   Seconds -= Minutes * (60);

   var TimeStr = ((Days > 0) ? Days + " dias " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds); 
   /* Este muestra el total de hora, aunque sea superior a 24 horas */
   //var TimeStr = LeadingZero(Hours+(Days*24)) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);

   document.getElementById('CuentaAtras').innerHTML = TimeStr;

   if(endTime<=new Date().getTime())
   {
       document.getElementById('CuentaAtras').innerHTML = "Finalizo";
   }else{
       /* Restamos un segundo al tiempo restante */
       tiempRestante-=1;
       /* Ejecutamos nuevamente la función al pasar 1000 milisegundos (1 segundo) */
       setTimeout("updateReloj()",1000);
       elemento.value="Empezar";
           clearTimeout(timeout);
           timeout=0;
       
   }
}

/* Funcion que pone un 0 delante de un valor si es necesario */
function LeadingZero(Time) {
   return (Time < 10) ? "0" + Time : + Time;
}

//-->
</script>
</body>
</html> 
  #2 (permalink)  
Antiguo 16/01/2015, 09:07
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 1 mes
Puntos: 834
Respuesta: Cronometro Javascript

¿Y si eliminaras esta línea (la que no está comentada) y se la asignaras al onclick de un botón?
Código:
/* Ejecutamos la funcion updateReloj() al cargar la pagina */
updateReloj();
  #3 (permalink)  
Antiguo 20/01/2015, 18:10
 
Fecha de Ingreso: enero-2015
Mensajes: 3
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Cronometro Javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
¿Y si eliminaras esta línea (la que no está comentada) y se la asignaras al onclick de un botón?
Código:
/* Ejecutamos la funcion updateReloj() al cargar la pagina */
updateReloj();
jajajajja eres todo un genio xD muchas gracias por la ayuda !!! pero creer que me puedas echar una mano en otra cosa del mismo codigo ? es que de verdad no entiendo mucho de java

le doy a empezar y ya inicia todo fino gracias a lo que me dijiste pero si le doy a empezar despues de que termino no se reinicia de nuevo como puedo hacer ? para que comience de nuevo ?


Cita:
<html>
<head>
</head>

<body>
<h1>Cuenta atras</h1>
<h2 id='CuentaAtras'></h2>

<div>
<input type="button" value="Empezar" onclick="updateReloj();">
</div>

<script language="JavaScript">
<!--
/* Determinamos el tiempo total en segundos */
var totalTiempo=10;

var timestampStart = new Date().getTime();
var endTime=timestampStart+(totalTiempo*1000);
var timestampEnd=endTime-new Date().getTime();

/* Variable que contiene el tiempo restante */
var tiempRestante=totalTiempo;

/* Ejecutamos la funcion updateReloj() al cargar la pagina */


function updateReloj() {

var Seconds=tiempRestante;

var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);

var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);

var TimeStr = ((Days > 0) ? Days + " dias " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);
/* Este muestra el total de hora, aunque sea superior a 24 horas */
//var TimeStr = LeadingZero(Hours+(Days*24)) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);

document.getElementById('CuentaAtras').innerHTML = TimeStr;

if(endTime<=new Date().getTime())
{
document.getElementById('CuentaAtras').innerHTML = "Finalizo";
}else{
/* Restamos un segundo al tiempo restante */
tiempRestante-=1;
/* Ejecutamos nuevamente la función al pasar 1000 milisegundos (1 segundo) */
setTimeout("updateReloj()",1000);
elemento.value="Empezar";
clearTimeout(timeout);
timeout=0;

}
}

/* Funcion que pone un 0 delante de un valor si es necesario */
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}

//-->



</script>
</body>
</html>
  #4 (permalink)  
Antiguo 21/01/2015, 05:06
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 10 años, 10 meses
Puntos: 14
Respuesta: Cronometro Javascript

Puedes hacerlo con dos botones: El mismo que hace play que haga de stop cuando este en funcionamiento y otro que devuelva a 0 todas las variables. Un saludo

Etiquetas: cronometro, funcion, html, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:46.