给网站添加一个精美的2026年跨年倒计时功能，附代码和教程！

给网站添加一个好看的跨年倒计时功能，与用户一起跨年，下面是截图预览 废话不多说，直接上代码： 🎊 2026跨年 立即前往 → JS代码： //

1. 关闭公告条功能 const newyearTipsBar = document.getElementById('newyearTipsBar'); const newyearTipsClose = document.getElementById('newyearTipsClose'); newyearTipsClose.addEventListener('click', function() { newyearTipsBar.style.opacity = '0'; newyearTipsBar.style.height = '0'; newyearTipsBar.style.padding = '0'; newyearTipsBar.style.border = '0'; setTimeout(() => { newyearTipsBar.style.display = 'none'; }, 300); }); //

2. 实时跨年倒计时功能 const countdownBox = document.getElementById('countdownBox'); const targetTime = new Date('2026-01-01 00:00:00').getTime(); // 2026新年零点 // 补零函数 function addZero(num) { return num 0) { countdownBox.innerHTML = `倒计时：${days}天 ${hours}时 ${minutes}分 ${seconds}秒`; } else { countdownBox.innerHTML = '已开启！'; clearInterval(countdownTimer); // 初始化+每秒更新 updateCountdown(); const countdownTimer = setInterval(updateCountdown, 1000); CSS代码： .countdown-tips-wrapper { width: 100%; display: flex; justify-content: center; align-items: flex-start; .newyear2026-tips-bar { height: 36px; width: 100%; max-width: 580px; background: linear-gradient(135deg, #ff7c94, #fbab5e, #fee256); display: flex; align-items: center; justify-content: center; padding: 0 12px; box-shadow: 0 3px 15px rgba(255, 56, 92,

0.3); position: relative; overflow: hidden; z-index: 999; border-radius: 18px; flex-wrap: nowrap; .newyear2026-tips-bar::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%;