1

Resulta que tengo el siguiente reloj, en javascript.

function ActivaReloj(){
    var now = new Date();
    var hora = now.getHours();
    var minuto = now.getMinutes();
    var segundo = now.getSeconds();

    segundo = CheckZeros(segundo);
    minuto = CheckZeros(minuto);
    hora = CheckZeros(hora);

    if (hora >= 12){

        Imprime = hora + " "+":"+" "+minuto+" "+":"+" "+segundo+" "+"PM";
    }else if (hora <= 12){

         Imprime = hora + " "+":"+" "+minuto+" "+":"+" "+segundo+" "+"AM";
    }
        document.form_reloj.reloj.value = Imprime;
        setTimeout("ActivaReloj()",500);
    }

function CheckZeros(i){
        
    if (i < 10) {
            
        i = "0" + i;
    }
    return i;
}
input{
width: 6cm; border-style: none; background-color: rgba(0,0,0,0.6); color: white; border-radius: 10px; text-align: center; height: 1cm; font-size: 14pt; font-family: 'Roboto', 'Segoe UI'; font-weight: 300;}

body{
  background-color: #00A623;
}

form{
  margin-top: 5mm;
  margin-bottom: -10cm !important;
}
<body onload="ActivaReloj()">
 <form name="form_reloj" id="clock">
   <input type="text" name="reloj" disabled="disabled">
 </form>
</body>

Pero como ese valor es fácilmente modificable, modificando la hora del equipo; lo que intento ahora es que el reloj obtenga la hora del servidor, el cual aunque cambie la hora del equipo el reloj no debe cambiar.

Lo intenté de la siguiente manera.

$now = Carbon\Carbon::now()->toTimeString();
return view('MyView', ['now'=>$now]);

Y Luego en el mismo <input> añadí la variable:

<input type="text" disabled="disabled" value="{{$now}}">

Pero, la hora no se actualiza automáticamente.

2 respuestas 2

0

Como desde Laravel obtiene la fecha con el formato H:M:S, podemos obtener estos valores para crear un objeto de la clase Date(), como no importa el día ni mes ni año podemos enviar cero en esos parámetros para el constructor.

Haremos uso de su función para añadir ceros a la izquierda, para la hora minutos y segundos, y por último utilizamos un operador ternario para asignar AM o PM según sea el caso.

HTML (blade)

<form name="form_reloj" id="clock">
    <input type="text" id="reloj" disabled="disabled" value="{{$now}}">
</form>

JS

let inputHora = document.getElementById('reloj');
//obtenemos la hora, minuto y segundo
var nowServer = inputHora.value.split(':');
// construimos el objeto para aumentar los segundos
var dateNow = new Date(0,0,0,nowServer[0],nowServer[1],nowServer[2]);
// Cada 1 segundo, actualizamos los segundos
setInterval(() => {
    // incrementamos los segundos
    dateNow.setSeconds(dateNow.getSeconds() + 1);
    //asignamos los valores al input
    inputHora.value = checkZeros(dateNow.getHours())
         + ":" + checkZeros(dateNow.getMinutes()) + ":" 
         + checkZeros(dateNow.getSeconds() + "" +
         (dateNow.getHours() >= 12 ? ' PM' :  ' AM'));
}, 1000);

function checkZeros(i){
    if (i < 10) {   
        i = "0" + i;
    }
    return i;
}
0

Asegurate de ponerle un id a tu input

<input type="text" disabled="disabled" value="{{$now}}" id="campo_hora" />

<script>
    var hora = document.querySelector('#campo_hora');
    var partes = hora.value.split(':');
    var ahora = new Date();
    ahora.setHours(partes[0]);
    ahora.setMinutes(partes[1]);
    ahora.setSeconds(partes[2]);

    //Cada 1 segundo actualizo el valor de la hora
    setInterval(function(){
        ahora.setSeconds(ahora.getSeconds() + 1);
        hora.value = ahora.getHours() + ":" + ahora.getMinutes() + ":" + ahora.getSeconds();
    }, 1000)
</script>
0

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.