给博客添加新年倒计时

2019 年 11 月 25 日

531次浏览

1386字数

##效果展示
[![Mv8Yvj.md.png](https://s2.ax1x.com/2019/11/25/Mv8Yvj.md.png)](https://imgchr.com/i/Mv8Yvj)
###准备工作
以我的博客为例，编辑主题的index.php文件，将下列代码复制到 <div class="wrapper-md" id="post-panel"> 的中间
```javascript

<div class="gn_box">
    <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</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">157 天</span>
            <span id="t_h">9 时</span>
            <span id="t_m">7 分</span>
            <span id="t_s">42 秒</span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2020/01/25 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中，字体颜色以及大小自行修改

```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;
}
/* 倒计时结束 */
```<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：Feihong</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://www.feihong.me/archives/67.html">https://www.feihong.me/archives/67.html</a></p><p class="content-copyright">转载时须注明出处及本声明</p></blockquote>

最后修改：2019 年 12 月 31 日 11 : 47 PM

如果觉得我的文章对你有用，请随意赞赏

给博客添加新年倒计时