我用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>
有位子比大神搞得这个代码非常的好用
,我试过了,所以还是推荐这个方法,下面上代码。
<p>测试2<span data-over-text="活动已结束" data-countdown="06/14/2024 23:59:59"style="color:red;"></span>你好</p>
月,日,年,时,分,秒 放进标签里即可 这是子比自带的
原链接:https://www.zibll.com/forum-post/25830.html
感谢大神@天无神话