Скрипт обратного отсчета
Есть скрипт обратного отчета
Как можно сделать так что бы было возможность поставить на одну страницы разные даты (любое количество) <!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
}
.timer__items {
display: flex;
font-size: 48px;
}
.timer__item {
position: relative;
min-width: 60px;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 15px;
text-align: center;
}
.timer__item::before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
font-size: 14px;
}
.timer__item:not(:last-child)::after {
content: ':';
position: absolute;
right: -15px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// конечная дата
const deadline = new Date(2023, 00, 01);
// id таймера
let timerId = null;
// склонение числительных
function declensionNum(num, words) {
return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}
// вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
function countdownTimer() {
const diff = deadline - new Date();
if (diff <= 0) {
clearInterval(timerId);
}
const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
$days.textContent = days < 10 ? '0' + days : days;
$days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
}
// получаем элементы, содержащие компоненты даты
const $days = document.querySelector('.timer__days');
// вызываем функцию countdownTimer
countdownTimer();
// вызываем функцию countdownTimer каждую секунду
timerId = setInterval(countdownTimer, 1000);
});
</script>
</head>
<body>
До нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days">00</div>
</div>
</div>
До Родества
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days">00</div>
</div>
</div>
До старого нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days">00</div>
</div>
</div>
</body>
</html>
|
timers init from data-attribute
Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
}
.timer__items {
display: flex;
font-size: 48px;
}
.timer__item {
position: relative;
min-width: 60px;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 15px;
text-align: center;
}
.timer__item::before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
font-size: 14px;
}
.timer__item:not(:last-child)::after {
content: ':';
position: absolute;
right: -15px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let divs = document.querySelectorAll('[data-end]');
// склонение числительных
function declensionNum(num, words) {
return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}
// вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
function countdownTimer() {
divs.forEach(div => {
let deadline = new Date(div.dataset.end);
const diff = deadline - new Date();
const days = diff > 0 ? Math.ceil(diff / 1000 / 60 / 60 / 24) : 0;
div.textContent = days < 10 ? '0' + days : days;
div.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
})
setTimeout(countdownTimer, 1000)
}
// вызываем функцию countdownTimer
countdownTimer();
});
</script>
</head>
<body>
До нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/1/2023">00</div>
</div>
</div>
До Рождества
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/7/2023">00</div>
</div>
</div>
До старого нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/14/2023">00</div>
</div>
</div>
</body>
</html>
|
рони,
Спасибо друг :) |
я понял отслеживать события с помощью атрибутов
|
Скажите а JS способен ли находить к примеру каждый второй и четвертый четверг месяца или первое или последнее воскресение месяца.
|
Сергей Ракипов,
да))) |
рони,
function getTuesdays(month, year) {
var d = new Date(year, month, 1),
tuesdays = [];
d.setDate(d.getDate() + (9 - d.getDay()) % 7)
while (d.getMonth() === month) {
tuesdays.push(new Date(d.getTime()));
d.setDate(d.getDate() + 7);
}
return tuesdays;
}
var meetingTuesdays = [],
ul = document.getElementById("list"),
temp,
li,
i;
for ( i = 0; i < 12; i += 1) {
temp = getTuesdays(i, 2023);
meetingTuesdays.push(temp[1]);
li = document.createElement("li");
li.textContent = temp[1];
ul.appendChild(li);
meetingTuesdays.push(temp[3]);
li = document.createElement("li");
li.textContent = temp[3];
ul.appendChild(li);
}
console.log(meetingTuesdays);
</script>
Я нашел как находить сейчас попробую сделать как выводить |
Сергей Ракипов,
http://javascript.ru/forum/misc/5135...o-mesyaca.html |
| Часовой пояс GMT +3, время: 19:42. |