0

necesito mostrar el tiempo trascurrido dinamicamente ,simulando un reloj, con la hora actual menos la hora inicial , consigo el tiempo trascurrido

Tiempo Trascurrido= Hora Actual - Hora de Inicio

 <el-col v-for="item in options" :key="item.value" align="middle" :xs="24" :sm="24" :md="24" :lg="4" :xl="24" style="margin-bottom:10px">

 <el-button type="primary"  style="width: 180px;height:120px ;"  >

    {{item.label}} - {{TiempoTrascurrido}}

  </el-button>
 </el-col>

js

data() {
    return {
        options: [{
          value: '01',
          label: 'Room 1',
          FechaHoraInicio:'2020-02-18T18:17:53.56',
          FechaHoraSalida:'2020-02-18T18:17:53.56',
        }, {
          value: '02',
          label: 'Room 2',
          FechaHoraInicio:'2020-02-18T18:17:53.56',
          FechaHoraSalida:'2020-02-18T18:17:53.56',
        }, 

}},

  computed: {

    TiempoTrascurrido: function(FechaHoraInicio) {

       setInterval(function(){ 
           return  Date.now()-new Date(FechaHoraInicio)
       }, 3000);

    },
  },

Creo botones dinamicos mediante el v-for, con los objetos que tienen cada uno una Hora de inicio, ahora quiero simular un reloj en cada boton con el tiempo trascurrido.

introducir la descripción de la imagen aquí

Como puedo lograrlo?. gracias!

1 respuesta 1

1

Dado que nunca muestras en pantalla la fecha de inicio y final, no es necesario hacer esa comparacion, puedes almacenar las fechas en otra variable en caso de tener que enviarlas al servidor pero para mostrar el tiempo transcurrido basta con un counter que se incremente cada segundo.

Algo como esto

<template>
  <div :id="id">
    Titulo: <strong @click="start">{{ id }}</strong><br>
    Segundos: <span @click="clear">{{ counter }}</span>
    Minutos: <span>{{ timerFormated }}</span>
  </div>
</template>

<script>
export default {
  name: "Timer",
  props: {
    id: String
  },
  data(){
    return {
      counter:0,
      interval:null,
    }
  },
  computed:{
    timerFormated(){
      return `${('0'+parseInt(this.counter/60, 10)).slice(-2)}:${('0'+this.counter % 60).slice(-2)}`;
    }
  },
  methods:{
    start(){
      console.log(this.inverval);
      if(this.interval) return this.stop();
      this.interval = setInterval(() => {
        this.counter = this.counter + 1
      }, 1000);
    },
    stop(){
      if(this.interval) clearInterval(this.interval);
      this.interval = null;
    },
    clear(){
      this.stop();
      this.counter = 0;
    }
  }
};
</script>

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.