怎么制作一个考研倒计时—网站侧边栏小工具

前言

今天上网冲浪的时候，看到了别人的网站上有节日倒计时、日期倒计时，十分有趣。可是他们居然没给出实现方法，但我也特别想要，所以我来说明一下实现方法。

方法

考研倒计时，实现非常简单，只需要 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