前言
今天上网冲浪的时候,看到了别人的网站上有节日倒计时、日期倒计时,十分有趣。可是他们居然没给出实现方法,但我也特别想要,所以我来说明一下实现方法。
方法
考研倒计时,实现非常简单,只需要 html+css+js 即可实现,一共两步。
首先是html代码:
你只需要将“var EndTime = new Date('2023/12/23 00:00:00')”里的日期改成你的目标日期即可。
<!--倒计时开始-->
<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>4</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>考</font><font
color=#4700B8>研</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<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('2023/12/23 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
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 + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
<!--倒计时结束-->
然后是CSS代码:
/* 考研倒计时样式 */
.gn_box {
padding: 10px 14px;
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;
}
现在强制刷新(或清除缓存)一下你的博客,就可以出现效果啦。
参考资料:https://blog.zets.cn
THE END
- 最新
- 最热
只看作者