Новогодние украшения (скрипты) для сайта в 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();

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

Оцените статью
Добавить комментарий

  1. Maximilian Edelman

    СПАСИБО

    Ответить
  2. Элси

    Здорово! Гирлянда в левом углу мне больше всего понравилась! Спасибо!

    Ответить
  3. Mycrib

    Элси, мне тоже эта гирлянда больше всего нравится. Ненавязчивое украшение 😉

    Ответить
  4. Леонид

    Я бы не стал пихать себе на сайт скрипты, расположенные на сторонних ресурсах.
    А если их изменят?
    Проще на время вставить содержание из js скрипта в тот же гаджет. Предварительно взглянув на содержание. Снег например норм. Разницы никакой, но так безопасней.
    Т.е. сделать как сделано в последнем примере. Только картинку загрузить к себе на сайт.

    Ответить
  5. Mycrib

    Согласна, риск есть, что изменят. Долго это все.
    Пока работает.

    Ответить
  6. тимур немой

    Очень хорошо и интересно, а можно просьбу? Поделитесь пожалуйста скриптом искринок для курсора мышки, пожалуйста....)))

    Ответить
    1. Mycrib

      Тимур, вот код искорок курсора:
      <div style="position:absolute; left:-5555px; top:-5555px;"> <script src="http://www.cursor-switch.com/widgets/2/2914803393.js&quot; type="text/javascript" charset="UTF-8"></script></div>

      Ответить
  7. vasy kolt

    Спасибо за украшения для сайта, очень кстати подошло...

    Ответить
  8. VitAliy SidOrochev

    проверю !

    Ответить
  9. Nick Inet

    Поставил) С наступающим НГ! Главное - БЕСПЛАТНО!

    Ответить
  10. oleg

    большое СПАСИБО за javascript

    Ответить
  11. Алексей Валериевич

    Поставил искорки на сайт ok-vmeste.ru Спасибо Mycrib! Не знал, что такие бывают...

    Ответить
  12. Эдуард

    Здравствуйте!
    Конечно, уважаю ваш труд, НО хотел бы отметить следующее. Если уж вы хотели увеличить посещаемость сайта на актуальную к новому году тему (а именно новогодние скрипты), то тогда поменяв в названии лишь 2024 год, вы для начала бы проверили действенность этих скриптов! У вас изначальная дата публикации датирована уже 2013 годом! За это время многие скрипты перестали действовать, т.к. многих сайтов, которые были первоисточниками скриптов, уже либо не существуют, либо удалили из своих баз эти скрипты. В том числе потому что сейчас и более новые технологии в css и html

    Ответить
    1. Иванова Наталья автор

      Исправила все скрипты. Теперь полностью рабочие варианты.

      Ответить