为handsome添加倒计时

Ratel
14
文章
25
评论
2019年6月21日15:22:04 11 3,197

前言

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

准备工作

进入handsome主题后台,控制台-->外观-->编辑当前外观,将下列代码粘贴到<div class="wrapper-md" id="post-panel"><!--首页输出文章-->的中间

<!--倒计时开始-->
<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>
<!--倒计时结束-->

然后将样式代码丢到后台开发者设置,自定义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;
}
继续阅读
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
  • 本文由 发表于 2019年6月21日15:22:04
  • 转载请务必保留本文链接:https://www.ratelsx.com/archives/29.html
handsome个性化修改代码 主题美化

handsome个性化修改代码

购买handsome主题也有段时间了,最近自己学习了前端,记录一下,方便以后美化 顶部栏背景色和颜色修改 /*#开头的为颜色代码,可以修改为自己喜欢的颜色*/ .bg-dark { color: #a...
handsome魔改开坑 闲聊杂谈

handsome魔改开坑

前言 此文针对小白而整理,如果你有什么好的建议,欢迎留言,代码里面注释还是相对比较明细,自行修改即可。本次修改的基本都是添加圆角,后续还得看看笔记才能自己写样式, 关于使用:基本都是放到后台---&g...
handsome美化教程 主题美化

handsome美化教程

之前购买了handsome主题,本人还是挺喜欢的,收集了一些美化代码,整理一下,留给那些有需要的小伙伴 点击特效 两个点击特效均放置于usr/themes/handsome/component/foo...
WordPress主题Begin美化 主题美化

WordPress主题Begin美化

做网站也有段时间了,没有想着能有什么收入,纯粹兴趣的驱使下,做了也有段时间了,总是在typecho和WordPress之间切来切去,终于最近烦了,又搬回了WordPress,本文记录一下折腾记录,以便...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:11   其中:访客  6   博主  5
    • 职业群主 0

      这样修改确实好看多了

      • 范明明 1

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

        • 绿软吧 0

          感谢分享

          • YH_evIs 1

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

              • Ratel

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

              • YH_evIs 1

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