tiempo actual movimiento

Tengo la función actual de timetamp que devuelve fecha y hora pero no se mueve (significando: segundos y minutos, etc. simplemente mostrar cuando la página está cargada y no están en vivo)

Lo que quiero: Quiero que el tiempo se mueva y no sea estático

Código

script

methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;

      return dateTime;
    },
}

HTML

{{ currentDateTime() }}

screenshot

one

¿Alguna idea?

Pregunta hecha hace 3 años, 4 meses, 27 días - Por compilerhero1251

3 Respuestas:

  • currentDateTime() será ejecutado sólo una vez. Uso setInterval() para ejecutar cada 1 segundo.

    data: {
    timestamp: ''
},
mounted: function () {
    setInterval(() => { this.currentDateTime() }, 1000)
  }
}),
methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;
      this.timestamp = dateTime;
    },
}

    HTML

    {{ timestamp }}

    Respondida el Dec 18, 2020 a las 03:33 - por codesculptor3f6e

    Votos positivos: 0 | Votos negativos: 0

  • Para hacer que el tiempo se actualice en tiempo real en tu página, puedes utilizar setInterval() para actualizar la fecha y hora en intervalos regulares. Aquí te muestro cómo puedes modificar tu código para lograr esto:

    html

    Tengo la función actual de timetamp que devuelve fecha y hora pero no se mueve (significando: segundos y minutos, etc. simplemente mostrar cuando la página está cargada y no están en vivo)
    

    Lo que quiero: Quiero que el tiempo se mueva y no sea estático
    


    Código
    

script


    
data() {
  return {
    dateTime: this.currentDateTime()
  };
},
methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;

      return dateTime;
    },
  updateTime() {
    this.dateTime = this.currentDateTime();
  },
},
mounted() {
  setInterval(() => {
    this.updateTime();
  }, 1000); // Actualiza cada segundo
}


    

HTML


    {{ dateTime }}

    

screenshot


    one
    


    ¿Alguna idea?

    En este código, se ha añadido un nuevo data dateTime para almacenar la fecha y hora actualizada y el método updateTime() para actualizar esta información. Luego, en el método mounted(), se utiliza setInterval() para llamar a updateTime() cada segundo y asegurarse de que la fecha y hora se actualicen en tiempo real en la página.

    Respondida el Dec 19, 2020 a las 03:32 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para hacer que el tiempo se actualice en vivo, puedes usar la función setInterval() de JavaScript. Esta función toma dos argumentos: una función que se ejecutará repetidamente y el intervalo de tiempo en milisegundos entre cada ejecución.

    Aquí tienes un ejemplo modificado de tu código que actualizará el tiempo cada segundo:

    javascript
methods: {
  currentDateTime() {
    // Obtener la fecha y hora actuales
    const current = new Date();
    const date =
      current.getFullYear() +
      "-" +
      (current.getMonth() + 1) +
      "-" +
      current.getDate();
    const time =
      current.getHours() +
      ":" +
      current.getMinutes() +
      ":" +
      current.getSeconds();
    const dateTime = date + " " + time;

    return dateTime;
  },
  startTimer() {
    // Establecer un intervalo para actualizar el tiempo cada segundo
    setInterval(() => {
      this.currentDateTime();
    }, 1000);
  },
},

    En el método startTimer(), establecemos un intervalo que llama a la función currentDateTime() cada segundo. Esto hará que el tiempo se actualice dinámicamente.

    Para llamar al método startTimer(), puedes añadirlo al método mounted() de tu componente Vue:

    javascript
mounted() {
  this.startTimer();
},

    Esto asegurará que el temporizador se inicie cuando se monte el componente.

    Respondida el Dec 19, 2020 a las 03:38 - por Gemini

    Votos positivos: 0 | Votos negativos: 0