一、首页倒计时源码
更新代码,无需每年手动更新,自动获取时间计算实现:
<style>
.gn_box {
border: none;
border-radius: 15px;
padding: 10px 14px;
margin: 10px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d { color: #982585; font-size: 18px; }
#t_h { color: #8f79c1; font-size: 18px; }
#t_m { color: #65b4b5; font-size: 18px; }
#t_s { color: #83caa3; font-size: 18px; }
#ld { font-size: 45px; color: #1900E6; }
</style>
<div class="gn_box">
<center>
<div id="BigMsg00" class="HotDate11">
<span id="ld0">
<font id="currentYear" color=#E80017 size="200">2025</font>
<font color=#8C0073 size="200">年</font>
<font color=#75008A size="200">-</font>
<font color=#5E00A1 size="200">已</font>
<font color=#4700B8 size="200">经</font>
<font color=#3000CF size="200">过</font>
<font color=#1900E6 size="200">去</font>
</span>
<span id="ld">0</span>
<font color=#0200FD size="200">天</font>
</div>
</center>
<center>
<div id="CountMsg" class="HotDate">
<span>
<font color=#1900E6 size="4">距离</font>
<font id="nextYear" color=#1900E6 size="4">2026</font>
<font color=#1900E6 size="4">年还有:</font>
</span>
<span id="t_d">0 天</span>
<span id="t_h">0 时</span>
<span id="t_m">0 分</span>
<span id="t_s">0 秒</span>
</div>
</center>
</div>
<script type="text/javascript">
var now = new Date();
var currentYear = now.getFullYear();
var nextYear = currentYear + 1;
document.getElementById("currentYear").innerHTML = currentYear;
document.getElementById("nextYear").innerHTML = nextYear;
var StartTime = new Date(currentYear + "/01/01 00:00:00");
var EndTime = new Date(nextYear + "/01/01 00:00:00");
function getLTime() {
var NowTime = new Date();
var t1 = NowTime.getTime() - StartTime.getTime();
var d1 = Math.floor(t1 / 1000 / 60 / 60 / 24);
document.getElementById("ld").innerHTML = d1;
}
function getRTime() {
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
if (t <= 0) {
document.getElementById("CountMsg").innerHTML = "<font color=#1900E6 size='4'>新年快乐!</font>";
return;
}
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
function checkYearUpdate() {
var now = new Date();
var currentYear = now.getFullYear();
var nextYear = currentYear + 1;
if (document.getElementById("currentYear").innerHTML != currentYear) {
document.getElementById("currentYear").innerHTML = currentYear;
document.getElementById("nextYear").innerHTML = nextYear;
StartTime = new Date(currentYear + "/01/01 00:00:00");
EndTime = new Date(nextYear + "/01/01 00:00:00");
}
}
getLTime();
getRTime();
setInterval(getRTime, 1000);
setInterval(checkYearUpdate, 1000);
</script>
修改开始和结束时间年即可
<style>
.gn_box{border: none; border-radius: 15px; }
.gn_box{padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff;}
#t_d{color: #982585; font-size: 18px;}
#t_h{color: #8f79c1; font-size: 18px;}
#t_m{color: #65b4b5; font-size: 18px;}
#t_s{color: #83caa3; font-size: 18px;}
</style>
<div class="gn_box">
<center>
<div id="BigMsg00" class="HotDate11">
<span id="ld0">
<font color=#E80017 size="200">2</font>
<font color=#D1002E size="200">0</font>
<font color=#BA0045 size="200">2</font>
<font color=#A3005C size="200">4</font>
<font color=#8C0073 size="200">年</font>
<font color=#75008A size="200">-</font>
<font color=#5E00A1 size="200">已</font>
<font color=#4700B8 size="200">经</font>
<font color=#3000CF size="200">过</font>
<font color=#1900E6 size="200">去</font>
</span>
<span id="ld" style="font-size: 45px; color:#1900E6">x</span>
<font color=#0200FD size="200">天</font>
</div>
</center>
<script type="text/javascript">
function getLTime(){
var StartTime = new Date('2024/01/1 00:00:00');
var NowTime = new Date();
var t1 = NowTime.getTime() - StartTime.getTime();
var d1 = Math.floor(t1 / 1000 / 60 / 60 / 24);
var leftday = document.getElementById("ld");
leftday.innerHTML = d1;
}
getLTime();
</script>
<center>
<div id="CountMsg" class="HotDate">
<span>
<font color=#1900E6 size="4">距离2025年还有:</font>
</span>
<span id="t_d"> 天</span>
<span id="t_h"> 时</span>
<span id="t_m"> 分</span>
<span id="t_s"> 秒</span>
</div>
</center>
<script type="text/javascript">
function getRTime() {
var EndTime = new Date('2025/01/1 00:00:00');
var StartTime = new Date('2024/01/1 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var t1 = NowTime.getTime() - StartTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var d1 = Math.floor(t1 / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
var day = document.getElementById("t_d");
if (day != null) {day.innerHTML = d + " 天";}
var hour = document.getElementById("t_h");
if (hour != null) {hour.innerHTML = h + " 时";}
var min = document.getElementById("t_m");
if (min != null) {min.innerHTML = m + " 分";}
var sec = document.getElementById("t_s");
if (sec != null) {sec.innerHTML = s + " 秒";}
}
setInterval(getRTime, 1000);
</script>
</div>
One comment
首尾呼应,主题鲜明,收束有力。