Reloj con JS

#1 (**permalink**) 06/03/2003, 16:11

Hola amigos foristas.
Estoy haciendo con JavaScript y ASP un sistema para medr tiempo de navegación.
Consiste en clikear un enlace que se dirige a una página que contiene la hora; lo que quiero hacer es que la hora empiece siempre desde cero: 00:00:00, cuando hago click en el enlace, el reloj se activa.
Luego, cuando no navego más, poner un link que haga la función de stop o algo parecido. ¿se puede hacer?
salu2

caricatos · #2 (**permalink**) 07/03/2003, 02:11

Hola AeSePe1:

Aquí tienes un ejemplo:

Código PHP:

  <html> 
<head> 
<script language="javascript" > 
var minutero = 0; 
var segundero = 0; 
var horario = 0; 
var activo = false; 
 
function ajuste(n)    { 
    var salida = ""; 
    if (n < 10)    salida = "0" + n ; 
    else salida = "" + n; 
    return salida; 
} 
 
function iniciaReloj()    { 
    if (activo) {alert("Fin cuenta"); location.reload()} 
    activo = true; 
    document.digital.boton.value = "Terminar..."; 
    document.digital.segundo.value = ajuste(segundero); 
    document.digital.minuto.value = ajuste(minutero); 
    document.digital.hora.value = ajuste(horario); 
    setTimeout("ponSegundero()", 1000); 
} 
 
function ponSegundero()    { 
    if (++segundero > 59)    { 
        ponMinutero(); 
        segundero = 0; 
    } 
    document.forms.digital.segundo.value = ajuste(segundero); 
    setTimeout("ponSegundero()", 1000); 
} 
 
function ponMinutero()    { 
    if (++minutero > 59)    { 
        ponHora(); 
        minutero = 0; 
    } 
    document.forms.digital.minuto.value = ajuste(minutero); 
} 
 
function ponHora()    { 
    if (++horario > 23)    horario = 0; 
    document.forms.digital.hora.value = ajuste(horario); 
} 
</script> 
 
</head> 
<body > 
 
<center> 
<table> 
<form name=digital> 
<tr> 
<td><input type=text name=hora size=2 value="00" disabled style="border:0" >:</td> 
<td><input type=text name=minuto size=2 value="00" disabled style="border:0" >:</td> 
<td><input type=text name=segundo size=2 value="00" style="border:0" disabled></td> 
</tr> 
<tr> 
<td colspan=3> 
<input type=button name=boton value="inicia Cuenta" onClick="iniciaReloj()"> 
</td> 
</tr> 
</table> 
</form> 
</center> 
</body> 
</html>

Espero que te sirva

Saludos

José Molina · #3 (**permalink**) 08/10/2004, 13:54

Estoyu tratando de usar tu código caricatos, pero que no sea en unos INPUT sino en <div>:

var minutero = 0;
var segundero = 0;
var horario = 0;
var activo = false;

function ajuste(n) {
var salida = "";
if (n < 10) salida = "0" + n ;
else salida = "" + n;
return salida;
}

function iniciaReloj() {
activo = true;

var horita_c = ajuste(horario) + ajuste(minutero) + ajuste(segundero);
document.getElementById('horas_c').firstChild.node Value = horas_c;
setTimeout("ponSegundero()", 1000);
}

function ponSegundero() {
if (++segundero > 59) {
ponMinutero();
segundero = 0;
}
document.getElementById('segundos').firstChild.nod eValue = segundos;
setTimeout("ponSegundero()", 1000);
}

function ponMinutero() {
if (++minutero > 59) {
ponHora();
minutero = 0;
}
document.getElementById('minutos').firstChild.node Value = minutos;
}

function ponHora() {
if (++horario > 23) horario = 0;
document.getElementById('horas').firstChild.nodeVa lue = horas;
}

function inicio_contador(){
document.write('<span id="horas_c">')
document.write('<span id="horas">')
document.write ('00</span>')
document.write('<span id="minutos">')
document.write ('00</span>')
document.write('<span id="segundos">')
document.write ('00</span>')
document.write ('</span>')
iniciaReloj();
}

Y para llamarlo donde quiero que este:

<script>

</script>

Pero me da error:

Tiempo: 0000[object] luego del primer minuto me coloca: Tiempo: 00[object][object]

Me ayudas un poco ?? o mucho ??? jejejeje

Gracias

caricatos · #4 (**permalink**) 08/10/2004, 14:46

Hola tocayo:

Veo alguna irregularidad...

Los nodeValue me parece que no se pueden modificar... si son nodos de texto me parece que habría que crear uno y reemplazar el otro (createTextNode + replaceNode), aunque estás creando la variable "horita_c" y usas "hora_c".

Creo que simplificaría mucho el código cambiar firstChild.nodeValue por innerHTML, además, netscape puede crear nodos vacíos en algunas ocasiones, o sea que tienes que tener cuidado.

Mira esas cosillas, e infórmanos de tus progresos...
Si quieres el código también lo puedo implementar (creo que no tendría problemas) pero creo que es mejor que tú mismo lo intentes.

Saludos

José Molina · #5 (**permalink**) 11/10/2004, 06:23

Saludos Caricatos.

Si efectivamente tenía unas inconsistencias en los nombres. Aquí esta como lo deje. Trabaja pero no como debería al 100%.

¿Qué hace mal? imprime primero 00:00:00 pero cuando comienza a contar imprime 00:00:1 luego 00:00:2 luego 00:00:3 y asi siempre.

Acepto ideas.

Este es el código:

Código:

var minutero = 0;
var segundero = 0;
var horario = 0;
var activo = false;

function ajuste(n)    {
    var salida = "";
    if (n < 10)    salida = "0" + n ;
    else salida = "" + n;
    return salida;
}

function iniciaReloj()    {
    activo = true;

	var hora_c = ajuste(horario) + ajuste(minutero) + ajuste(segundero);
	document.getElementById('horas_c').firstChild.nodeValue = hora_c;
    setTimeout("ponSegundero()", 1000);
}

function ponSegundero()    {
    if (++segundero > 59)    {
        ponMinutero();
        segundero = 0;
    }
	document.getElementById('segundos').firstChild.nodeValue = segundero;
    setTimeout("ponSegundero()", 1000);
}

function ponMinutero()    {
    if (++minutero > 59)    {
        ponHora();
        minutero = 0;
    }
	document.getElementById('minutos').firstChild.nodeValue = minutero;
}

function ponHora()    {
    if (++horario > 23)    horario = 0;
	document.getElementById('horas').firstChild.nodeValue = horario;
}

function inicio_contador(){	
	document.write('<span id="horas_c">')
	document.write('<span id="horas">')
	document.write ('00:</span>')
	document.write('<span id="minutos">')
	document.write ('00:</span>')
	document.write('<span id="segundos">')
	document.write ('00</span>')
	document.write ('</span>')
	iniciaReloj();
}

Gracias

caricatos · #6 (**permalink**) 11/10/2004, 07:08

Hola otra vez:

Por lo que veo, solo te queda usar el "ajuste"...

En vez de:
document.getElementById('segundos').firstChild.nod eValue = segundero;
debes usar:

document.getElementById('segundos').firstChild.nod eValue = ajuste(segundero);

y lo mismo para el minutero y el horario.

Supongo que con eso será suficiente.

Saludos

José Molina · #7 (**permalink**) 11/10/2004, 07:24

Que te puedo decir Caricatos. Gracias eso era.

caricatos · #8 (**permalink**) 11/10/2004, 07:29

Cita:

Iniciado por José Molina

Que te puedo decir Caricatos. Gracias eso era.

¡Estupendo!

Saludetes

José Molina · #9 (**permalink**) 15/11/2004, 08:22

Saludos.

No es que este viajando al pasado, pero me surgio este nuevo requerimiento.

Ahora cuando los minutos lleguen a 5, debo mostrar un alert indicando que esta por concluir el tiempo.

Lo que hice fue agregar esto:

if(minutero == 5) {
alert("Tiempo MOSCA");
}

aquí:

function ajuste(n) {
var salida = "";
if (n < 10) salida = "0" + n ;
else salida = "" + n;

if(segundero == 5) {
alert("Tiempo MOSCA");
}

return salida;
}

Digamos que funciona, pero el contador se detiene y como ya esta dentro de los 5 minutos, cada vez que cambia el segundo me aparece la pantalla.

Donde debría colocar ese IF ??

Gracias

José Molina · #10 (**permalink**) 15/11/2004, 09:04

Jejeje, digamos que lo solucione a medias.

f((minutero==5) && (segundero == 00)) {
alert("Tiempo MOSCA");
}

Así mostrara el ALERT solamente a los 5 minutos de iniciado el conteo.