0

Что нужно: таймер обратного отсчета (включая месяц), при достижении 0 - запускается вновь на месяц.

Имеется такой код:

<div class='timer' v-if='loaded'>
 {{ displayDays }}
 {{ displayHours }}
 {{ displayMinutes }}
 {{ displaySeconds }}
</div>

И вью:

 export default {
  data() {
   return {
    displayDays: 0,
    displayHours: 0,
    displayMinutes: 0,
    displaySeconds: 0,
    loaded: false
   };
  },
  computed: {
   _seconds: () => 1000,
   _minutes() {
    return this._seconds * 60;
   },
  _hours() {
   return this._minutes * 60;
   },
   _days() {
   return this._hours * 24;
   }
  },
 mounted() {
  this.showRemaining();
 },
 methods: {
   formatNumb(num) {
    return num < 10 ? `0${  num}` : num;
  },
 showRemaining() {
  const timer = setInterval(() => {
    const now = new Date();
    const end = new Date(2021, 8, 6, 13, 0,12, 12);
    const distance = end.getTime() - now.getTime();

    if(distance < 0) {
      clearInterval(timer);
      return;
    }

    const days = Math.floor((distance / this._days));
    const hours = Math.floor((distance % this._days) / this._hours);
    const minutes = Math.floor((distance % this._hours) / this._minutes);
    const seconds = Math.floor((distance % this._minutes) / this._seconds);

    this.displayMinutes = this.formatNumb(minutes);
    this.displaySeconds = this.formatNumb(seconds);
    this.displayHours = this.formatNumb(hours);
    this.displayDays = this.formatNumb(days);
    this.loaded = true;
   }, 1000);
  }
 }
};

Работает отлично, но как видно, переменная end записывается вручную. Подскажите, пожалуйста, что стоит поменять и добавить, дабы таймер автоматически подсчитывал дни/часы/минуты/секунды до конца месяца, а когда доходил до 0 - отчитывал вновь.

К сожалению, плагином нельзя воспользоваться. :(

1 ответ 1

0

Когда достигнет нуля просто заново его запускай, с новой датой в переменной end. Новая дата соответственно будет равна дате end + 1 месяц.

2
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 3 сен 2021 в 12:21
  • @Кирилл Если я правильно понял, то мне следует поменять end на const end = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1);, а в функции, где 0 добавить this.end = now.getMonth() + 1; ?
    – Alex
    3 сен 2021 в 12:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.