为handsome添加倒计时

前言

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

<!--倒计时开始-->
<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” 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;
}
当前文章:为handsome添加倒计时
本文链接:https://www.ratelsx.com/archives/29.html
联系方式:350790090@qq.com
除特别注明外,文章均为Ratel原创,转载时请注明本文出处及文章链接

评论

  1. 职业群主
    Windows Chrome
    1年前
    2019-6-21 17:27:53

    这样修改确实好看多了

    • Ratel 博主
      Android Chrome
      1年前
      2019-6-21 17:28:16

      哈哈,还行吧

  2. 范明明
    Windows Edge
    1年前
    2019-6-21 17:31:29

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

    • Ratel 博主
      Android Chrome
      1年前
      2019-6-21 17:32:02

      哪里样式?

      • 范明明
        Windows Edge
        1年前
        2019-6-21 17:33:18

        倒计时的样式

      • Ratel 博主
        Android Chrome
        1年前
        2019-6-21 17:34:29

        我发的丢到自定义样式啊

  3. 绿软吧
    Windows Chrome
    1年前
    2019-7-18 19:33:54

    感谢分享

  4. YH_evIs
    Macintosh Safari
    10月前
    2019-11-26 10:17:45

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

    • Ratel 博主
      Windows Chrome
      10月前
      2019-11-27 16:39:47

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

  5. YH_evIs
    Macintosh Safari
    10月前
    2019-11-26 10:44:36

    ❗ 上一条贴错代码了=。=
    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);
    }

    • Ratel 博主
      Windows Chrome
      10月前
      2019-11-27 16:40:08

      可以的,自行修改

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇