Si una cosa nos permite JavaScript es el de dotar dinamismo a nuestras páginas web. Este dinamismo puede ser desencadenado por dos circunstancias. La primera es que el usuario que interactua con la web genere un evento. Por ejemplo, pulsar un botón, pasar sobre una imagen,… El segundo caso es que las acciones se desencadenen por cuestiones temporales, es decir pasado un cierto tiempo.
Para este segundo caso, JavaScript nos proporciona de dos métodos setInterval y setTimeout. La primera, y en la que nos centraremos en este ejemplo, permite ejecutar una función cada cierto tiempo de una forma iterativa. Por otro lado, la segunda ejecuta una función pasado un tiempo.
En nuestro ejemplo vamos a implementar un contador dentro de la página. Esta claro que un valor funcional no nos va a aportar, si bien, lo que estamos buscando es un valor didáctico y ver como funciona el método setInterval.
Lo primero que vamos a crear es un formulario, el cual contenga un campo de texto. En dicho campo de texto, iremos actualizándolo con valores del contador.
Es importante el darle un ID al campo. Ya que este valor será el que nos permita acceder a su contenido, para modificarlo a posteriori.
Lo siguiente será definir una función que implemente el contador. Básicamente, esta función, obtendrá, vía DOM, el elemento del formulario y volcará sobre él, el valor de un contador.
Nuestra función sería la siguiente:
function contador(){
var contador = document.getElementById("contador");
contador.value = cont;
cont++;
}Hacer notar que mediante el método .getElementById(id) obtenemos el elemento de la página que queremos modificar.
El contador deberá de tener un valor inicial. Es por ello que, fuera de la función, le asignaremos el valor. Todo el código JavaScript sería el siguiente:
Ya, solo nos quedará, el crear el intervalo mediante la función setInterval. Esta función recibe dos parámetros. El primero será la función que queremos ejecutar cada X segundos. En nuestro caso ‘contador()’. El segundo parámetro son los X segundos, si bien, serán expresados en milisegundos.
Por ejemplo, si queremos ejecutar el contador, cada 1 segundo, el código JavaScript será el siguiente:
setInterval('contador()',1000);Solo nos quedará resolver una pregunta. ¿Cuando ejecutar el setInterval?. Este no le podemos lanzar antes de definir la función contador, ni antes de que se haya definido cualquier parte de la página que sea modificada por contador (en nuestro caso el formulario). Es por ello que lo mejor es ejecutarla al final de la página, o mejor dicho, cuando se haya cargado toda la página.
Es por ello, que ejecutaremos el setInterval en el método onLoad de nuestra página. Quedándonos el siguiente código:
rances
como hago para hacerlo en un h1 sin jquery porfavor
Víctor Cuervo
Buenas,
Lo mejor es que le pongas un id al h1 y te serviría el mismo código. Puedes acceder a todos los elementos h1 mediante el método .getElementByTagName() que lo tienes explicado en http://lineadecodigo.com/javascript/obtener-el-contenido-de-un-elemento-conociendo-su-tag/
Saludos.
Luis Aguilar
¿Por que tengo que utilizar las ‘ ‘ para encerrar la función? lo he echo sin utilizarlas y al parecer no tiene ningín efecto las he añadido y funciona correctamente.
Añado mi codigo :
function horaRegistro(){
var fecha = new Date(); //Fecha actual
var hora = fecha.getHours();
var minutos = fecha.getMinutes();
var segundos = fecha.getSeconds();
if(hora < 10)
hora='0'+hora;
if(minutos<10)
minutos='0'+minutos
document.getElementById('hora').value=hora+":"+minutos;
}
setInterval('horaRegistro()',1000);
carlos
buen día.
tengo una inquietud y es saber si se puede programar un evento en js para que se ejecute solo cada x cantidad de tiempo aun si no se esta utilizando la pagina web
magnolia
yo quiro que al insertarse un nuevo registro la pagina se me actualice… aqui el codigo..
lo que hace es que escribo en una pagina y en esa pagina se actualiza pero si esta abierta en otro explorado con otra sesion esta no se actualiza ayuda por favor.
var dataString=’sms=’+$(‘#sms’).val()+
‘&idUsuario=’+$(‘#idUsuario’).val()+’&agregar=1′;
$.ajax({
type:»POST»,
url:»includes/agregar_publico.php»,
data: dataString
}).done(function(data)
{
$(«#info»).html(data);
$(«#sms»).val(»);
verPublico();
if($Result1==true){
setInterval(‘verPublico()’,1000);
}
}
)
}
});
Bea
Buenos días,
Existe la posibilidad de recargar la jsp en función de una condición? Es decir, en vez de refrescarla cada X tiempo, refrescarla siempre que se cumpla una condición. Esta condición quedará determinada en otra parte del código; en el momento que se cumpla meterá en sesión un flag. Resumiendo: quiero que la jsp se recargue siempre que se cumpla ese flag.
Muchas gracias,
Un saludo
Víctor Cuervo
Bea,
Con el siguiente código:
setInterval('contador()',1000);Estás ejecutando la función
contador()cada 1 sg. Lo que tienes que hacer dentro de la funcióncontador()es chequear la condición que te interese o no. Y en ese momento recargar la pagina.function contador() { if (condicion) { // Recargar } }Espero que te oriente.
Saludos.
cinedhoy
hola yo quisiera saber como hacer que esos numeros se queden guardados, me explico. este codigo si el usuario sale de la pagina y vuelve a entrar se vuelve a 0, yo quisiera que siga contando y si el usuario sale y entra este no haya perdido la cantidad contada. Es como si fuera relog automatico de la vida del blog desde el momento que pong el script
Víctor Cuervo
cinedhoy, puedes ir guardándolos en una caché local.
Tienes un ejemplo de cómo utilizarla en http://lineadecodigo.com/html5/acceder-a-la-cache-local-del-navegador-con-html5/
Espero que te sirva de ayuda. Saludos.
Elio
Gracias
lineadecodigo
@Moises Narvaez,
Sí, mucho mejor con clearInterval()
:-D
Moises Narvaez
gracias, en su momento lo solucioné así:
var intval = «»;
function start_Int(){
intval=window.setInterval(«haga_algo()»,5);
}
function stop_Int(){
if(intval!=»»){
window.clearInterval(intval);
intval=»»;
}
}
lineadecodigo
@Roxana, @Ivan,
Me alegro que les haya servido. :-D
lineadecodigo
@Moises Narvaez,
Para pararlo tendrías que tener en algún punto o mediante alguna acción que se lanzase un
setInterval(‘contador()’,0);
Ivan
Gracias, me ah funcionado mucho
Roxana
Hey muchas Gracias me mega sirvio y funciono para lo que necesitaba, me ahorre mucho codigo con esta funcion =)
Moises Narvaez
y cuando quiero que se detenga… o que ya no realice mas el ciclo… como hago ?
Kenichi
Gracias, fue muy util.
roberth navarro
Muchas Gracias fue muy util su articulo para mi
selene
hola esta muy bien el codigo pero me pudieran ayudar? ando buscando un contador de visitas en javascript para mi pagina q esta en c#. Es muy importante.
De antemano gracias