Новогодние украшения (скрипты) для сайта в 2025 году

Узнайте также, как украсить ёлку на Яндекс вашей ёлочной игрушкой, сгенерированной нейросетью.

Большинство кодов устанавливается размещением html в элемент блога. На WordPress - это виджет HTML-код, на ucoz добавляем новый блок в конструкторе.

Новогодние скрипты 2025

Новогодние виджеты призваны создавать праздничное настроение. Воспользуйтесь обновленными скриптами, чтобы добавить на ваш сайт или в приложение атмосферу зимнего волшебства. Эти инструменты не только украшают интерфейс, но и вовлекают пользователей, напоминая о приближении самого долгожданного праздника — Нового года.

Фейерверк, праздничный салют для блога

(function () {
    const bits = 80;
    const speed = 33;
    const bangs = 5;
    const colours = ["#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"];
    const bangheight = [];
    const intensity = [];
    const colour = [];
    const Xpos = [];
    const Ypos = [];
    const dX = [];
    const dY = [];
    const stars = [];
    const decay = [];
    let swide = 800;
    let shigh = 600;
    let boddie;

    function createDiv(content, fontSize) {
        const div = document.createElement("div");
        div.style.font = `${fontSize}px monospace`;
        div.style.position = "absolute";
        div.style.backgroundColor = "transparent";
        div.appendChild(document.createTextNode(content));
        return div;
    }

    function write_fire(index) {
        stars[`${index}r`] = createDiv("|", 12);
        boddie.appendChild(stars[`${index}r`]);
        for (let i = bits * index; i < bits + bits * index; i++) {
            stars[i] = createDiv("*", 13);
            boddie.appendChild(stars[i]);
        }
    }

    function launch(index) {
        colour[index] = Math.floor(Math.random() * colours.length);
        Xpos[`${index}r`] = swide * 0.5;
        Ypos[`${index}r`] = shigh - 5;
        bangheight[index] = Math.round((0.5 + Math.random()) * shigh * 0.4);
        dX[`${index}r`] = (Math.random() - 0.5) * swide / bangheight[index];
        const star = stars[`${index}r`];
        if (dX[`${index}r`] > 1.25) {
            star.firstChild.nodeValue = "/";
        } else if (dX[`${index}r`] < -1.25) {
            star.firstChild.nodeValue = "\\";
        } else {
            star.firstChild.nodeValue = "|";
        }
        star.style.color = colours[colour[index]];
    }

    function bang(index) {
        let hiddenCount = 0;
        for (let i = bits * index; i < bits + bits * index; i++) {
            const star = stars[i];
            star.style.left = `${Xpos[i]}px`;
            star.style.top = `${Ypos[i]}px`;
            if (decay[i]) {
                decay[i]--;
            } else {
                hiddenCount++;
            }
            if (decay[i] === 15) {
                star.style.fontSize = "7px";
            } else if (decay[i] === 7) {
                star.style.fontSize = "2px";
            } else if (decay[i] === 1) {
                star.style.visibility = "hidden";
            }
            Xpos[i] += dX[i];
            Ypos[i] += dY[i] += 1.25 / intensity[index];
        }
        if (hiddenCount !== bits) {
            setTimeout(() => bang(index), speed);
        }
    }

    function stepthrough(index) {
        const oldX = Xpos[`${index}r`];
        const oldY = Ypos[`${index}r`];
        Xpos[`${index}r`] += dX[`${index}r`];
        Ypos[`${index}r`] -= 4;
        if (Ypos[`${index}r`] < bangheight[index]) {
            const colorIndex = Math.floor(Math.random() * 3 * colours.length);
            intensity[index] = 5 + Math.random() * 4;
            for (let i = bits * index; i < bits + bits * index; i++) {
                Xpos[i] = Xpos[`${index}r`];
                Ypos[i] = Ypos[`${index}r`];
                dY[i] = (Math.random() - 0.5) * intensity[index];
                dX[i] = (Math.random() - 0.5) * (intensity[index] - Math.abs(dY[i])) * 1.25;
                decay[i] = 16 + Math.floor(Math.random() * 16);
                const star = stars[i];
                if (colorIndex < colours.length) {
                    star.style.color = colours[i % 2 ? colour[index] : colorIndex];
                } else if (colorIndex < 2 * colours.length) {
                    star.style.color = colours[colour[index]];
                } else {
                    star.style.color = colours[i % colours.length];
                }
                star.style.fontSize = "13px";
                star.style.visibility = "visible";
            }
            bang(index);
            launch(index);
        }
        stars[`${index}r`].style.left = `${oldX}px`;
        stars[`${index}r`].style.top = `${oldY}px`;
    }

    function set_width() {
        let width = 999999;
        let height = 999999;
        if (document.documentElement && document.documentElement.clientWidth) {
            if (document.documentElement.clientWidth > 0) width = document.documentElement.clientWidth;
            if (document.documentElement.clientHeight > 0) height = document.documentElement.clientHeight;
        }
        if (typeof self.innerWidth !== "undefined" && self.innerWidth) {
            if (self.innerWidth > 0 && self.innerWidth < width) width = self.innerWidth;
            if (self.innerHeight > 0 && self.innerHeight < height) height = self.innerHeight;
        }
        if (document.body.clientWidth) {
            if (document.body.clientWidth > 0 && document.body.clientWidth < width) width = document.body.clientWidth;
            if (document.body.clientHeight > 0 && document.body.clientHeight < height) height = document.body.clientHeight;
        }
        if (width === 999999 || height === 999999) {
            width = 800;
            height = 600;
        }
        swide = width;
        shigh = height;
    }

    function init() {
        if (document.getElementById) {
            boddie = document.createElement("div");
            boddie.style.position = "fixed";
            boddie.style.top = "0px";
            boddie.style.left = "0px";
            boddie.style.overflow = "visible";
            boddie.style.width = "1px";
            boddie.style.height = "1px";
            boddie.style.backgroundColor = "transparent";
            document.body.appendChild(boddie);
            set_width();
            for (let i = 0; i < bangs; i++) {
                write_fire(i);
                launch(i);
                setInterval(() => stepthrough(i), speed);
            }
        }
    }

    window.addEventListener("load", init);
    window.addEventListener("resize", set_width);
})();

Курсор в виде снега

(function () {
    const colour = "blue";
    const sparkles = 100;
    let x = 400, ox = 400;
    let y = 300, oy = 300;
    let swide = 800, shigh = 600;
    let sleft = 0, sdown = 0;

    const tiny = [];
    const star = [];
    const starv = [];
    const starx = [];
    const stary = [];
    const tinyx = [];
    const tinyy = [];
    const tinyv = [];

    function createDiv(height, width) {
        const div = document.createElement("div");
        div.style.position = "absolute";
        div.style.height = `${height}px`;
        div.style.width = `${width}px`;
        div.style.overflow = "hidden";
        div.style.backgroundColor = colour;
        return div;
    }

    function set_width() {
        if (typeof self.innerWidth === "number") {
            swide = self.innerWidth;
            shigh = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientWidth) {
            swide = document.documentElement.clientWidth;
            shigh = document.documentElement.clientHeight;
        } else if (document.body.clientWidth) {
            swide = document.body.clientWidth;
            shigh = document.body.clientHeight;
        }
    }

    function set_scroll() {
        if (typeof self.pageYOffset === "number") {
            sdown = self.pageYOffset;
            sleft = self.pageXOffset;
        } else if (document.body.scrollTop || document.body.scrollLeft) {
            sdown = document.body.scrollTop;
            sleft = document.body.scrollLeft;
        } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
            sleft = document.documentElement.scrollLeft;
            sdown = document.documentElement.scrollTop;
        } else {
            sdown = 0;
            sleft = 0;
        }
    }

    function mouse(e) {
        set_scroll();
        y = e ? e.pageY : event.y + sdown;
        x = e ? e.pageX : event.x + sleft;
    }

    function update_star(i) {
        if (--starv[i] === 25) {
            star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
        }
        if (starv[i]) {
            stary[i] += 1 + Math.random() * 3;
            if (stary[i] < shigh + sdown) {
                star[i].style.top = `${stary[i]}px`;
                starx[i] += (i % 5 - 2) / 5;
                star[i].style.left = `${starx[i]}px`;
            } else {
                star[i].style.visibility = "hidden";
                starv[i] = 0;
                return;
            }
        } else {
            tinyv[i] = 50;
            tiny[i].style.top = `${tinyy[i] = stary[i]}px`;
            tiny[i].style.left = `${tinyx[i] = starx[i]}px`;
            tiny[i].style.width = "2px";
            tiny[i].style.height = "2px";
            star[i].style.visibility = "hidden";
            tiny[i].style.visibility = "visible";
        }
    }

    function update_tiny(i) {
        if (--tinyv[i] === 25) {
            tiny[i].style.width = "1px";
            tiny[i].style.height = "1px";
        }
        if (tinyv[i]) {
            tinyy[i] += 1 + Math.random() * 3;
            if (tinyy[i] < shigh + sdown) {
                tiny[i].style.top = `${tinyy[i]}px`;
                tinyx[i] += (i % 5 - 2) / 5;
                tiny[i].style.left = `${tinyx[i]}px`;
            } else {
                tiny[i].style.visibility = "hidden";
                tinyv[i] = 0;
                return;
            }
        } else {
            tiny[i].style.visibility = "hidden";
        }
    }

    function sparkle() {
        if (x !== ox || y !== oy) {
            ox = x;
            oy = y;
            for (let c = 0; c < sparkles; c++) {
                if (!starv[c]) {
                    star[c].style.left = `${starx[c] = x}px`;
                    star[c].style.top = `${stary[c] = y}px`;
                    star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
                    star[c].style.visibility = "visible";
                    starv[c] = 50;
                    break;
                }
            }
        }
        for (let c = 0; c < sparkles; c++) {
            if (starv[c]) update_star(c);
            if (tinyv[c]) update_tiny(c);
        }
        requestAnimationFrame(sparkle);
    }

    function init() {
        if (document.getElementById) {
            for (let i = 0; i < sparkles; i++) {
                const tinyDiv = createDiv(3, 3);
                tinyDiv.style.visibility = "hidden";
                document.body.appendChild(tiny[i] = tinyDiv);
                starv[i] = 0;
                tinyv[i] = 0;

                const starDiv = createDiv(5, 5);
                starDiv.style.backgroundColor = "transparent";
                starDiv.style.visibility = "hidden";

                const rlef = createDiv(1, 5);
                const rdow = createDiv(5, 1);
                starDiv.appendChild(rlef);
                starDiv.appendChild(rdow);
                rlef.style.top = "3px";
                rlef.style.left = "0px";
                rdow.style.top = "0px";
                rdow.style.left = "3px";

                document.body.appendChild(star[i] = starDiv);
            }
            set_width();
            sparkle();
        }
    }

    window.addEventListener("load", init);
    document.addEventListener("mousemove", mouse);
    window.addEventListener("resize", set_width);
})();

Мигающая гирлянда

function COT(e, t, n, r) {
    document.write('<div id="cot_tl_fixed">');
    document.write('<a href="' + t + '" target="' + n + '"><img src="' + e + '" alt="Новогодние украшения (скрипты) для сайта" border="0"></a>');
    document.write('</div>');
}

var Ovr2 = "";

if (typeof document.compatMode != "undefined" && document.compatMode != "BackCompat") {
    cot_t1_DOCtp = "top: 0; left: 0;";
} else {
    cot_t1_DOCtp = "top: 0; left: 0;";
}

if (typeof document.compatMode != "undefined" && document.compatMode != "BackCompat") {
    cot_t1_DOCtp2 = "top: 0;";
} else {
    cot_t1_DOCtp2 = "top: 0;";
}

var cot_tl_bodyCSS = "* html {background: fixed; background-repeat: repeat; background-position: left top;}";
var cot_tl_fixedCSS = "#cot_tl_fixed {position: fixed;";
cot_tl_fixedCSS += "_position: absolute;";
cot_tl_fixedCSS += "top: 0px;";
cot_tl_fixedCSS += "left: 0px;";
cot_tl_fixedCSS += "clip: rect(0 100 85 0);";
cot_tl_fixedCSS += cot_t1_DOCtp + "}";

var cot_tl_popCSS = "#cot_tl_pop {background-color: transparent;";
cot_tl_popCSS += "position: fixed;";
cot_tl_popCSS += "_position: absolute;";
cot_tl_popCSS += "height: 98px;";
cot_tl_popCSS += "width: 1920px;";
cot_tl_popCSS += "right: 120px;";
cot_tl_popCSS += "top: 20px;";
cot_tl_popCSS += "overflow: hidden;";
cot_tl_popCSS += "visibility: hidden;";
cot_tl_popCSS += "z-index: 99999;";
cot_tl_popCSS += cot_t1_DOCtp2 + "}";

document.write('<style type="text/css">' + cot_tl_bodyCSS + cot_tl_fixedCSS + cot_tl_popCSS + '</style>');

COT("https://mycrib.ru/wp-content/uploads/2025/01/girlyanda.gif", "SC2", "none");

Скрипт падающего снега (на Jquery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            jQuery(document).snowfall({
                flakeCount: 400,
                flakeColor: "#ffffff",
                flakeIndex: 999999,
                minSize: 1,
                maxSize: 4,
                minSpeed: 2,
                maxSpeed: 8,
                round: true,
                shadow: false,
            });
        });
    </script>

Падающие красивые крупные снежинки

<script>
        (function () {
            const snowmax = 35;
            const snowcolor = ["#AAAACC", "#DDDDFF", "#CCCCDD", "#F3F3F3", "#F0FFFF", "#FFFFFF", "#EFF5FF"];
            const snowtype = ["Arial Black", "Arial Narrow", "Times", "Comic Sans MS"];
            const snowletter = "❄"; // Символ снежинки
            const sinkspeed = 0.6;
            const snowmaxsize = 40;
            const snowminsize = 8;
            const snowingzone = 1;
            const snow = [];
            let marginbottom;
            let marginright;
            let timer;
            const x_mv = [];
            const crds = [];
            const lftrght = [];

            function randommaker(range) {
                return Math.floor(range * Math.random());
            }

            function initsnow() {
                marginbottom = window.innerHeight;
                marginright = window.innerWidth;
                const snowsizerange = snowmaxsize - snowminsize;

                for (let i = 0; i <= snowmax; i++) {
                    crds[i] = 0;
                    lftrght[i] = Math.random() * 15;
                    x_mv[i] = 0.03 + Math.random() / 10;
                    snow[i] = document.getElementById("s" + i);
                    snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
                    snow[i].size = randommaker(snowsizerange) + snowminsize;
                    snow[i].style.fontSize = snow[i].size + "px";
                    snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
                    snow[i].sink = sinkspeed * snow[i].size / 5;

                    if (snowingzone === 1) {
                        snow[i].posx = randommaker(marginright - snow[i].size);
                    } else if (snowingzone === 2) {
                        snow[i].posx = randommaker(marginright / 2 - snow[i].size);
                    } else if (snowingzone === 3) {
                        snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
                    } else if (snowingzone === 4) {
                        snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
                    }

                    snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
                    snow[i].style.left = snow[i].posx + "px";
                    snow[i].style.top = snow[i].posy + "px";
                }

                movesnow();
            }

            function movesnow() {
                for (let i = 0; i <= snowmax; i++) {
                    crds[i] += x_mv[i];
                    snow[i].posy += snow[i].sink;
                    snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
                    snow[i].style.top = snow[i].posy + "px";

                    if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
                        if (snowingzone === 1) {
                            snow[i].posx = randommaker(marginright - snow[i].size);
                        } else if (snowingzone === 2) {
                            snow[i].posx = randommaker(marginright / 2 - snow[i].size);
                        } else if (snowingzone === 3) {
                            snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
                        } else if (snowingzone === 4) {
                            snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
                        }
                        snow[i].posy = 0;
                    }
                }

                timer = setTimeout(movesnow, 50);
            }

            function createSnowflakes() {
                const snowContainer = document.createElement("div");
                snowContainer.style.position = "absolute";
                snowContainer.style.top = "0";
                snowContainer.style.left = "0";
                document.body.appendChild(snowContainer);

                for (let i = 0; i <= snowmax; i++) {
                    const snowflake = document.createElement("span");
                    snowflake.id = "s" + i;
                    snowflake.style.position = "absolute";
                    snowflake.style.top = -snowmaxsize + "px";
                    snowflake.textContent = snowletter; // Используем символ снежинки
                    snowContainer.appendChild(snowflake);
                }
            }

            createSnowflakes();
            window.addEventListener("load", initsnow);
        })();

Мигающие звездочки в верхней части сайта (над шапкой)

 const style = document.createElement('style');
        style.textContent = `
            body {
                margin: 0;
                overflow: hidden;
                background-color: #000;
            }
            .star {
                position: absolute;
                width: 40px;
                height: 40px;
                background: url('https://mycrib.ru/wp-content/uploads/2025/01/coloredstars.gif') no-repeat center center;
                background-size: cover;
            }
        `;
        document.head.appendChild(style);

        // Конфигурация
        const snowsrc = "https://mycrib.ru/wp-content/uploads/2025/01/coloredstars.gif"; // Путь к изображению звездочки
        const no = 15; // Количество звездочек
        const hidesnowtime = 0; // Время исчезновения звездочек (0 = никогда)
        const snowdistance = "pageheight"; // Расстояние падения ("windowheight" или "pageheight")

        // Переменные
        let doc_width = window.innerWidth;
        let doc_height = window.innerHeight;
        const stars = [];

        // Создание звездочек
        for (let i = 0; i < no; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.left = `${Math.random() * doc_width}px`;
            star.style.top = `${Math.random() * doc_height}px`;
            document.body.appendChild(star);
            stars.push({
                element: star,
                x: Math.random() * doc_width,
                y: Math.random() * doc_height,
                amplitude: Math.random() * 20,
                stepX: 0.01 + Math.random() / 20, // Уменьшено для замедления горизонтального движения
                stepY: 0.3 + Math.random() / 2    // Уменьшено для замедления вертикального движения
            });
        }

        // Анимация падения звездочек
        function animateStars() {
            doc_width = window.innerWidth;
            doc_height = snowdistance === "windowheight" ? window.innerHeight : document.body.scrollHeight;

            stars.forEach(star => {
                star.y += star.stepY;
                if (star.y > doc_height - 50) {
                    star.x = Math.random() * (doc_width - star.amplitude - 30);
                    star.y = 0;
                    star.stepX = 0.01 + Math.random() / 20; // Уменьшено для замедления горизонтального движения
                    star.stepY = 0.3 + Math.random() / 2;   // Уменьшено для замедления вертикального движения
                }
                star.x += star.stepX;
                star.element.style.top = `${star.y}px`;
                star.element.style.left = `${star.x + star.amplitude * Math.sin(star.stepX)}px`;
            });

            requestAnimationFrame(animateStars);
        }

        // Запуск анимации
        animateStars();

        // Остановка анимации (если нужно)
        if (hidesnowtime > 0) {
            setTimeout(() => {
                stars.forEach(star => star.element.style.visibility = "hidden");
            }, hidesnowtime * 1000);
        }

Счетчик дней до Нового года в виде Санта Клауса

Для того, чтобы добавить счетчик, необходимо добавить три кода на страницу: css в стили, html в место расположения счетчика и javascript перед закрывающимся тегом body.

 <style>
        .container {
            background-image: url('https://mycrib.ru/wp-content/uploads/2025/01/santas-countdown-background.png');
            background-size: cover;
            width: 180px; /* Ширина изображения */
            height: 191px; /* Высота изображения */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }
        .countdown {
    font-size: 14px;
    font-family: Arial;
    color: #3b4edf;
    position: absolute;
    bottom: 25px;
    left: 20px;
}
    </style>

html-код для вставки счетчика:
<div class="container"><div class="countdown" id="countdown"></div></div>

Javascript:

<script>function calculateDaysUntilNewYear() {
            const today = new Date();
            const newYearDate = new Date(`January 1, ${today.getFullYear() + 1}`);
            const msPerDay = 24 * 60 * 60 * 1000;
            const timeLeft = newYearDate.getTime() - today.getTime();
            const daysLeft = Math.ceil(timeLeft / msPerDay);

            return daysLeft;
        }

        // Функция для обновления счетчика
        function updateCountdown() {
            const daysLeft = calculateDaysUntilNewYear();
            const countdownElement = document.getElementById('countdown');

            if (daysLeft === 1) {
                countdownElement.textContent = `${daysLeft} день до Нового года!`;
            } else if (daysLeft > 1) {
                countdownElement.textContent = `${daysLeft} дней до Нового года!`;
            } else {
                countdownElement.textContent = "С Новым годом!";
            }
        }

        // Обновляем счетчик при загрузке страницы
        updateCountdown();</script>

Виджет "Сколько осталось до Нового года" на новогоднем фоне-растяжке

Виджет "Сколько дней осталось до Нового года" вставляют тремя кодами: css, html и js.

.countdown-container {
            background-image: url('https://mycrib.ru/wp-content/uploads/2025/01/bg_new.png');
            background-repeat: repeat-x; /* Бесшовный фон по горизонтали */
            background-size: auto 100%;
            width: 100%; /* Занимает всю ширину контейнера */
            padding: 20px 0;
            text-align: center;
            color: white;
        }
        .countdown-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .countdown-timer {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .countdown-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .countdown-digits {
            display: flex;
            gap: 5px;
        }
        .countdown-square {
            background-color: white;
            color: #333;
            font-size: 24px;
            font-weight: bold;
            width: 40px; /* Размер квадрата */
            height: 40px; /* Размер квадрата */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }
        .countdown-label {
            font-size: 14px;
            color: white;
            margin-top: 5px;
        }

Вставьте HTML-код в нужное место страницы, где хотите видеть виджет:

 <div class="countdown-container">
        <div class="countdown-title">До нового года осталось...</div>
        <div class="countdown-timer" id="countdown-timer">
            <div class="countdown-item">
                <div class="countdown-digits" id="days-digits">
                    <div class="countdown-square">0</div>
                    <div class="countdown-square">0</div>
                    <div class="countdown-square">0</div>
                </div>
                <div class="countdown-label">Дней</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-digits" id="hours-digits">
                    <div class="countdown-square">0</div>
                    <div class="countdown-square">0</div>
                </div>
                <div class="countdown-label">Часов</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-digits" id="minutes-digits">
                    <div class="countdown-square">0</div>
                    <div class="countdown-square">0</div>
                </div>
                <div class="countdown-label">Минут</div>
            </div>
        </div>
    </div>

И осталось добавить Javascript:

function updateCountdown() {
            const now = new Date();
            const newYear = new Date(`January 1, ${now.getFullYear() + 1}`);
            const timeLeft = newYear - now;
            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            updateDigits('days-digits', days, 3); // Дни могут быть трехзначными
            updateDigits('hours-digits', hours, 2);
            updateDigits('minutes-digits', minutes, 2);
        }
        function updateDigits(elementId, value, digitsCount) {
            const digits = value.toString().padStart(digitsCount, '0').split('');
            const digitElements = document.getElementById(elementId).children;
            for (let i = 0; i < digitsCount; i++) {
                digitElements[i].textContent = digits[i];
            }
        }
        setInterval(updateCountdown, 1000 * 60);
        updateCountdown();

Скрипт Гирлянда с музыкальными шариками. Скачать. В архиве подробное описание установки.