前言

今天看到其他网站倒计时代码挺好看,就扒下来修改了下样式,效果图如下

<!-- 倒计时开始 -->
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>1</font>
        <font color=#A3005C>9</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('2019/02/05 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>
<!-- 倒计时结束 -->

准备工作

进入 handsome 主题后台,控制台 --> 外观 --> 编辑当前外观,将下列代码粘贴到 <div class="wrapper-md skt-loading" id="post-panel"> 之前 , 然后将样式代码丢到后台开发者设置,自定义 css 中,字体颜色以及大小自行修改

.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;
}

推荐文章

关于我被骗到追回那件事

起因22号晚上打王者的时候,那把我吕布,他韩信(左图)...

handsome美化教程

简介之前购买了handsome主题,本人还是挺喜欢的,...

评论区(11条评论)

我要评论

昵称
邮箱
网址
0/200
取消
YH_evIs LV1

感谢以下大佬,但是我用了你的js后(其实算是我自己的问题),只要切换到文章内容页面,就会发生一系列的因为未找到绑定dom的报错(或许是因为开了pjax后不会重新绑定的原因),于是我改了一下代码 改成了
虽然我技术比较烂不知道有没有更优化的方法,但是问题是解决了 ::twemoji:uncomfort::

浙江
Windows
Edge
Ratel 博主
回复 @ YH_evIs :

因为是基于比较上个版本修改的,所以会出现问题

广东
Windows
Edge
YH_evIs LV1
回复 @ Ratel :

上一条贴错代码了=。=
function getRTime() {
if(!document.getElementById(“t_d”)) return;
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);
}

浙江
Windows
Edge
Ratel 博主
回复 @ YH_evIs :

可以的,自行修改

广东
Windows
Edge
绿软吧 LV1

感谢分享

福建
Windows
Edge
范明明 LV1

应该把样式在正文配个图片展示出来。

内蒙古
Windows
Edge
Ratel 博主
回复 @ 范明明 :

哪里样式

广东
Windows
Edge
范明明 LV1
回复 @ Ratel :

倒计时的样式

内蒙古
Windows
Edge
Ratel 博主
回复 @ 范明明 :

我发的丢到自定义样式啊

广东
Windows
Edge
职业群主 LV1

这样修改确实好看多了

上海
Windows
Edge
Ratel 博主
回复 @ 职业群主 :

哈哈,还行吧

广东
Windows
Edge
可按 ESC 键退出搜索

0 篇文章已搜寻到~