我用deepseeK帮我写的2个样式倒计时代码,感觉不错,分享一下使用,和网站没有冲突。
<!-- 活动倒计时 - 精简隔离版 --> <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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。