2

Buen día, quiero agregar esta propiedad especifica para un input de HTML que visualizará la hora del sistema, pero me gustaría que el contador de segundos y minutos estuviera actualizándose cada segundo, no se si me explico, hasta ahora solo cambia cuando actualizo la pagina por obvias razones.

Este es el código de la hora:

<?php 
   date_default_timezone_get();
   $time = date_default_timezone_set("America/Hermosillo");
   $time=date("h:i:s a");
?>   

y este es el codigo de mi input:

<label>Hora entrada</label>
<input type="text" readonly="true" value="<?php echo($time); ?>"></input>
<br /><br />

A grandes rasgos lo que busco es un contador de horas minutos y segundos dentro de un input

0

2 respuestas 2

2

Para probar se puede poner esto en prueba_timer.html y verlo en el navegador

<input id=the_input>
<script>
window.addEventListener('load', function(){
  setInterval(function(){ 
     document.getElementById('the_input').value=(new Date()).toTimeString().substr(0,8); 
  },1000);
});
</script>

Se destaca:

  1. el window.addEventListener para asegurarse que la página se termine de cargar

  2. setInterval (para repetir cada 1000 milisegundos)

  3. el substr (si no se quiere mostrar el timezone)

4
  • Claro que ese la hora del navegador (del lado del cliente) y no del servidor. Además hay que agregar un ID al input (<input id=the_input... ) Commented el 22 abr. 2016 a las 20:38
  • Para hacerlo con la hora del servidor te quedan dos opciones (y sus mixtos), mandar una vez la hora del servidor (con ajax), calcular la diferencia con la hora actual y mostrar (gracias a la diferencia) siempre la hora del servidor (basándose en la del cliente). O si no enviar un ajax cada segundo y mostrar lo que el servidor devuelva. Commented el 22 abr. 2016 a las 20:42
  • he probado tu codigo de igual forma no actualiza cada segundo, y efectivamente parece que necesito la ayuda de ajax.
    – matteo
    Commented el 22 abr. 2016 a las 20:57
  • ahí adapté la solución. La anterior no funcionaba porque usé setTimeout (que corre una sola vez), el substr estaba corrido un lugar y la función toJSON devuelve la hora en la zona horaria GMT0 en vez de la zona local. Commented el 22 abr. 2016 a las 23:34
0

Puedes usar la librería moments.js con el modulo timezone para así poder usar fechas con su correspondiente uso horario.

Código HTML

<label>Hora entrada</label>
<input id="reloj" type="text" readonly="true" ></input>
<br /><br />

Código Javascript

function RefrescarMostrarHora() {
    var s = moment().tz("America/Hermosillo").format('hh:mm:ss a');    
    document.getElementById("reloj").innerHTML = s;
}

RefrescarMostrarHora(); //para la priemra carga
setInterval(RefrescarMostrarHora, 500); //cada medio segundo se refresca
1
  • muchas gracias, pero... crees que tenga algun error el codigo, ya que me muestra el input en blanco.
    – matteo
    Commented el 22 abr. 2016 a las 21:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.