wordpress文章内添加倒计时的代码

我用deepseeK帮我写的2个样式倒计时代码,感觉不错,分享一下使用,和网站没有冲突。

wordpress文章内添加倒计时的代码

<!-- 活动倒计时 - 精简隔离版 -->
<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>

第二个极简版

wordpress文章内添加倒计时的代码

<!-- 极简倒计时 -->
<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>

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
RackNerd Leaderboard Banner
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索