En este ejemplo vamos a construir un reloj, y con el fin de ser más generalistas, lo vamos a situar en diferentes puntos de la ventana (Título de la ventana, barra de estado y dentro de la propia ventana en un bloque de tipo div). Este reloj, lo vamos a actualizar cada segundo, si bien se puede poner cualquier intervalo de actualización como por ejemplo cada minuto y no mostrar los segundos, para lo cual solo habría que retocar un poco el código.
Código JavaScript
var timerID = null; //Identidad del temporizador var timerRunning = false; //Flag para saber si el reloj esta activo function stopTimer() { //Para el reloj if(timerRunning) { clearTimeout(timerID); timerRunning = false; } } function startTimer() { // Para el reloj, si esta activo y lo arranca. stopTimer(); runClock(); } function runClock() { var Hora=timeNow(); // Solo para evitar hacer varias llamadas var Dia=fechahoy(); // Mostrar la hora en los elementos que se desee window.document.getElementById("reloj").innerHTML= Dia + " " + Hora; window.status=Dia + " " + Hora; //window.document.title=Dia + " " + Hora; //Si no hay frames top.document.title=Dia + " " + Hora; //Por si hay frames timerID = setTimeout("runClock()",1000); //setTimeout() se llama a si mismo. timerRunning = true; } function timeNow() { //Toma la hora y la formatea now = new Date(); hours = now.getHours(); minutes = now.getMinutes(); seconds = now.getSeconds(); timeStr = ((hours < 10) ? "0" : "") + hours; timeStr += ((minutes < 10) ? ":0" : ":") + minutes; timeStr += ((seconds < 10) ? ":0" : ":") + seconds; return timeStr; } function fechahoy() { var diasemana = new Array ('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'); var nombremes = new Array ('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'); var ahora; var fecha = new Date(); var mes = fecha.getMonth(); var dia = fecha.getDay(); var num = fecha.getDate(); var ano=fecha.getFullYear(); ahora = diasemana[dia] + ", " + num + " de " + nombremes[mes] + " de " + ano; return ahora; }
Código HTML
<body onLoad="StartTimer();"> //Si se desea arrancar al cargar la página ... <div id="reloj"></div> ...