- Это на компьютере (Всё работает! Как и должно быть!)
- Это на телефоне (Почему-то возвращает NaN)
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="sel">
<select class="select-css" id="eventDays">
</select>
</p>
<p class="timer"><span id="timeout"></span></p>
const days = [{
id: 1,
title: 'Лето',
day: 1,
month: 6
}, {
id: 2,
title: '1 сентября',
day: 1,
month: 8
}, {
id: 3,
title: 'Новый год',
day: 1,
month: 1
}, {
id: 4,
title: '8 марта',
day: 8,
month: 3
}, {
id: 5,
title: '23 февраля',
day: 23,
month: 2
}];
class EventDaysController {
eventDays = days;
intervalEvent = null;
currentTimeout = null;
onSelectOptionCalback = () => {};
onSelectOption(option) {
this.onSelectOptionCalback(option);
const event = this.eventDays.find(f => f.id === +option);
const eventDate = new Date(`${new Date().getFullYear()}-${event.month}-${event.day}`)
if (eventDate - new Date() < 0) {
eventDate.setFullYear(new Date().getFullYear() + 1)
}
const timestamp = eventDate - new Date();
this.renderTimeout(timestamp, 'timeout')
}
secondsToTime(seconds) {
const milisecond = seconds % 1000;
seconds = (seconds - milisecond) / 1000;
const second = seconds % 60;
seconds = (seconds - second) / 60;
const minute = seconds % 60;
seconds = (seconds - minute) / 60;
const hour = seconds % 24;
seconds = (seconds - hour) / 24;
const day = seconds
return `
${this.declensionNum(day, ['день', 'дня', 'дней'])}
${this.declensionNum(hour, ['час', 'часа', 'часов'])}
${this.declensionNum(minute, ['минута', 'минуты', 'минут'])}
${this.declensionNum(second, ['секунда', 'секунды', 'секунд'])}`
}
declensionNum(num, words) {
return `${num} ${words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]}`;
}
renderTimeout(timestamp, id) {
clearInterval(this.intervalEvent);
this.currentTimeout = timestamp;
const span = document.getElementById(id);
this.intervalEvent = setInterval(() => {
span.innerHTML = this.secondsToTime(this.currentTimeout);
this.currentTimeout -= 1000;
}, 1000)
}
renderList(selectId) {
const selectDOM = document.getElementById(selectId);
this.eventDays.forEach(f => {
let option = document.createElement('option');
option.value = f.id;
option.innerHTML = f.title;
selectDOM.append(option);
})
selectDOM.addEventListener('change', (e) => {
this.onSelectOption(e.target.value)
});
this.onSelectOption(this.eventDays[0].id)
}
}
document.addEventListener('DOMContentLoaded', function() {
const edc = new EventDaysController();
edc.onSelectOptionCalback = (option) => {}
edc.renderList('eventDays');
});
