Что нужно: таймер обратного отсчета (включая месяц), при достижении 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 - отчитывал вновь.
К сожалению, плагином нельзя воспользоваться. :(