Таймер даты на javascript
Подскажите, как сделать чтобы работали оба таймера? Пробовал querySelectorAll но так вообще не работает https://codepen.io/Djalilov-M/pen/yLXOoym
document.addEventListener('DOMContentLoaded', () => {
const this_data = new Date();
this_data.setDate(this_data.getDate() + 6);
console.log(this_data)
const daysVal = document.querySelector('.time-count__days .time-count__val');
const hoursVal = document.querySelector('.time-count__hours .time-count__val');
const minutesVal = document.querySelector('.time-count__minutes .time-count__val');
const secondsVal = document.querySelector('.time-count__seconds .time-count__val');
const daysText = document.querySelector('.time-count__days .time-count__text');
const hoursText = document.querySelector('.time-count__hours .time-count__text');
const minutesText = document.querySelector('.time-count__minutes .time-count__text');
const secondsText = document.querySelector('.time-count__seconds .time-count__text');
function declOfNum(number, titles) {
let cases = [2, 0, 1, 1, 1, 2];
return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];
}
const timeCount = () => {
let now = new Date();
let leftUntil = this_data - now;
let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
let minutes = Math.floor(leftUntil / 1000 / 60) % 60;
let seconds = Math.floor(leftUntil / 1000) % 60;
daysVal.textContent = days;
hoursVal.textContent = hours;
minutesVal.textContent = minutes;
secondsVal.textContent = seconds;
daysText.textContent = declOfNum(days, ['день', 'дня', 'дней']);
hoursText.textContent = declOfNum(hours, ['час', 'часа', 'часов']);
minutesText.textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
secondsText.textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
};
timeCount();
setInterval(timeCount, 1000);
});
body {
background-color: #fafafa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url("../img/bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
.time-count {
background: #fff;
box-shadow: 4px 8px 40px rgba(8, 24, 111, 0.2);
border-radius: 30px;
width: 796px;
height: 359px;
padding: 75px 86px;
}
.time-count__title {
margin: 0;
margin-bottom: 35px;
font-weight: 700;
font-size: 40px;
line-height: 47px;
text-align: center;
color: var(--color-dark);
}
.time-count__content {
display: flex;
justify-content: center;
}
.time-count__item {
text-align: center;
}
.time-count__val {
min-width: 81px;
font-weight: 700;
font-size: 70px;
line-height: 82px;
color: var(--color-accent);
}
.time-count__separator {
font-weight: 700;
font-size: 48px;
line-height: 74px;
text-align: center;
color: var(--color-accent);
margin: 0 33px;
}
.time-count__text {
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-dark);
}
<h1 class="visually-hidden">Таймер обратного отсчета</h1>
<div class="time-count">
<h2 class="time-count__title"> осталось</h2>
<div class="time-count__content">
<div class="time-count__item time-count__days">
<div class="time-count__val">00</div>
<span class="time-count__text">дней</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__hours">
<div class="time-count__val">00</div>
<span class="time-count__text">часов</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__minutes">
<div class="time-count__val">00</div>
<span class="time-count__text">минут</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__seconds">
<div class="time-count__val">00</div>
<span class="time-count__text">секунд</span>
</div>
</div>
</div>
<br><br>
<h1 class="visually-hidden">Таймер обратного отсчета</h1>
<div class="time-count">
<h2 class="time-count__title"> осталось</h2>
<div class="time-count__content">
<div class="time-count__item time-count__days">
<div class="time-count__val">00</div>
<span class="time-count__text">дней</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__hours">
<div class="time-count__val">00</div>
<span class="time-count__text">часов</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__minutes">
<div class="time-count__val">00</div>
<span class="time-count__text">минут</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__seconds">
<div class="time-count__val">00</div>
<span class="time-count__text">секунд</span>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: pyduti
→ Ссылка
document.addEventListener('DOMContentLoaded', () => {
const this_data = new Date();
this_data.setDate(this_data.getDate() + 6);
console.log(this_data)
const daysVal = document.querySelectorAll('.time-count__days .time-count__val');
const hoursVal = document.querySelectorAll('.time-count__hours .time-count__val');
const minutesVal = document.querySelectorAll('.time-count__minutes .time-count__val');
const secondsVal = document.querySelectorAll('.time-count__seconds .time-count__val');
const daysText = document.querySelectorAll('.time-count__days .time-count__text');
const hoursText = document.querySelectorAll('.time-count__hours .time-count__text');
const minutesText = document.querySelectorAll('.time-count__minutes .time-count__text');
const secondsText = document.querySelectorAll('.time-count__seconds .time-count__text');
function declOfNum(number, titles) {
let cases = [2, 0, 1, 1, 1, 2];
return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];
}
const timeCount = () => {
let now = new Date();
let leftUntil = this_data - now;
let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
let minutes = Math.floor(leftUntil / 1000 / 60) % 60;
let seconds = Math.floor(leftUntil / 1000) % 60;
daysVal[0].textContent = days;
hoursVal[0].textContent = hours;
minutesVal[0].textContent = minutes;
secondsVal[0].textContent = seconds;
daysVal[1].textContent = days;
hoursVal[1].textContent = hours;
minutesVal[1].textContent = minutes;
secondsVal[1].textContent = seconds;
daysText[0].textContent = declOfNum(days, ['день', 'дня', 'дней']);
hoursText[0].textContent = declOfNum(hours, ['час', 'часа', 'часов']);
minutesText[0].textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
secondsText[0].textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
daysText[1].textContent = declOfNum(days, ['день', 'дня', 'дней']);
hoursText[1].textContent = declOfNum(hours, ['час', 'часа', 'часов']);
minutesText[1].textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
secondsText[1].textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
};
timeCount();
setInterval(timeCount, 1000);
});
body {
background-color: #fafafa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url("../img/bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
.time-count {
background: #fff;
box-shadow: 4px 8px 40px rgba(8, 24, 111, 0.2);
border-radius: 30px;
width: 796px;
height: 359px;
padding: 75px 86px;
}
.time-count__title {
margin: 0;
margin-bottom: 35px;
font-weight: 700;
font-size: 40px;
line-height: 47px;
text-align: center;
color: var(--color-dark);
}
.time-count__content {
display: flex;
justify-content: center;
}
.time-count__item {
text-align: center;
}
.time-count__val {
min-width: 81px;
font-weight: 700;
font-size: 70px;
line-height: 82px;
color: var(--color-accent);
}
.time-count__separator {
font-weight: 700;
font-size: 48px;
line-height: 74px;
text-align: center;
color: var(--color-accent);
margin: 0 33px;
}
.time-count__text {
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-dark);
}
<h1 class="visually-hidden">Таймер обратного отсчета</h1>
<div class="time-count">
<h2 class="time-count__title"> осталось</h2>
<div class="time-count__content">
<div class="time-count__item time-count__days">
<div class="time-count__val">00</div>
<span class="time-count__text">дней</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__hours">
<div class="time-count__val">00</div>
<span class="time-count__text">часов</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__minutes">
<div class="time-count__val">00</div>
<span class="time-count__text">минут</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__seconds">
<div class="time-count__val">00</div>
<span class="time-count__text">секунд</span>
</div>
</div>
</div>
<br><br>
<h1 class="visually-hidden">Таймер обратного отсчета</h1>
<div class="time-count">
<h2 class="time-count__title"> осталось</h2>
<div class="time-count__content">
<div class="time-count__item time-count__days">
<div class="time-count__val">00</div>
<span class="time-count__text">дней</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__hours">
<div class="time-count__val">00</div>
<span class="time-count__text">часов</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__minutes">
<div class="time-count__val">00</div>
<span class="time-count__text">минут</span>
</div>
<div class="time-count__separator">:</div>
<div class="time-count__item time-count__seconds">
<div class="time-count__val">00</div>
<span class="time-count__text">секунд</span>
</div>
</div>
</div>