分享两款网站通用的活动倒计时特效代码-QQ沐编程

之前也有分享过活动倒计时源码，不过有些花里胡哨，适合做单页面，并不是适合作为组件添加到网站页面某个地方，今天分享的这两个活动倒计时源码可以添加到网站首页或者底部，或者侧边栏，或者内容页都可以，代码量很少，并且简单易修改

精简美观版本

红色样式，美观显眼，而且展示的页面大小也比较小，完全可以适合放到网站侧边栏里面，当然放到其他合适的位置也可以

代码如下：

<!-- 活动倒计时 - 精简隔离版 -->
<div id="simple-countdown" style="margin: 20px 0; padding: 15px; background: #fff8f8; border-radius: 8px; border: 1px solid #ffdddd; text-align: center;">
    <h3 style="margin-top: 0; color: #d32f2f;">活动结束倒计时</h3>
    <div style="display: flex; justify-content: center; gap: 10px; margin: 15px 0;">
        <div style="background: #d32f2f; color: white; padding: 8px 12px; border-radius: 4px;">
            <div style="font-size: 24px; font-weight: bold;" id="countdown-days">00</div>
            <div style="font-size: 12px;">天</div>
        </div>
        <div style="background: #d32f2f; color: white; padding: 8px 12px; border-radius: 4px;">
            <div style="font-size: 24px; font-weight: bold;" id="countdown-hours">00</div>
            <div style="font-size: 12px;">时</div>
        </div>
        <div style="background: #d32f2f; color: white; padding: 8px 12px; border-radius: 4px;">
            <div style="font-size: 24px; font-weight: bold;" id="countdown-minutes">00</div>
            <div style="font-size: 12px;">分</div>
        </div>
        <div style="background: #d32f2f; color: white; padding: 8px 12px; border-radius: 4px;">
            <div style="font-size: 24px; font-weight: bold;" id="countdown-seconds">00</div>
            <div style="font-size: 12px;">秒</div>
        </div>
    </div>
    <p style="margin-bottom: 0; color: #666;" id="countdown-message">活动即将结束，请抓紧时间参与！</p>
</div>

<script>
// 自执行函数隔离作用域，避免变量冲突
(function() {
    // 设置活动结束时间（年, 月-1, 日, 时, 分, 秒）
    var endDate = new Date(2029, 11, 31, 23, 59, 59); // 2024年12月31日23:59:59
    
    function updateCountdown() {
        var now = new Date();
        var diff = endDate - now;
        
        if (diff <= 0) {
            document.getElementById('countdown-days').textContent = '00';
            document.getElementById('countdown-hours').textContent = '00';
            document.getElementById('countdown-minutes').textContent = '00';
            document.getElementById('countdown-seconds').textContent = '00';
            document.getElementById('countdown-message').textContent = '活动已结束！';
            return;
        }
        
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        document.getElementById('countdown-days').textContent = days.toString().padStart(2, '0');
        document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0');
        document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0');
        document.getElementById('countdown-seconds').textContent = seconds.toString().padStart(2, '0');
    }
    
    // 使用DOMContentLoaded确保不会影响页面加载
    document.addEventListener('DOMContentLoaded', function() {
        updateCountdown();
        setInterval(updateCountdown, 1000);
    });
})();
</script>

效果如下：

极简文字版

这个纯属文字倒计时，没有其他花里胡哨的东西，可以放到网站底部，或者公告栏里面，其他合适的位置也可以，代码量很少，只有二十多行

代码如下：

<!-- 极简倒计时 -->
<div style="text-align: center; margin: 15px 0;">
    <p>距离活动结束还有: 
    <span id="cd-d">00</span>天
    <span id="cd-h">00</span>时
    <span id="cd-m">00</span>分
    <span id="cd-s">00</span>秒</p>
</div>

<script>
(function(){
    var end = new Date(2029, 11, 31);
    function update(){
        var now = new Date(), diff = end - now;
        if(diff < 0) return;
        document.getElementById('cd-d').innerText = Math.floor(diff/86400000);
        document.getElementById('cd-h').innerText = Math.floor(diff/3600000)%24;
        document.getElementById('cd-m').innerText = Math.floor(diff/60000)%60;
        document.getElementById('cd-s').innerText = Math.floor(diff/1000)%60;
    }
    setInterval(update, 1000);
    update();
})();
</script>

效果如下：