网站上有个春节倒计是不是很酷！

经过一番钻研，终于在网站上实现

欢迎大家到我的个人博客网站看看

以下分享自己的学习过程：

起初我是在轻刻年轮 – 记磊博客看到这种的

https://www.ly522.com/2459.html#comments

后来在贴吧 wordpress 主题吧找到

https://tieba.baidu.com/p/6424588148?traceid=

其实现的源码如下：

<!-- 倒计时开始：菜鸟 IT 资源网 cnitzy.com 新年快乐哦 -->
<div class="gn_box">
<h1><center><font color=#E80017 > 菜鸟 IT 资 </font><font color=#D1002E > 源网 20</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>
</center></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>

代码实现效果

这个是在页尾展示的

我也能实现这样的效果

但是放到页尾看到的人会很少

于是想用侧边栏增强文本实现

由于笔者的网站是

Powered by WordPress

Theme Dobby Made By Vtrois

主题小工具并没有增强文本工具

于是下载启用了一款插件

Enhanced Text Widget

想在文字下方附一张喜庆的背景图

查得采用 HTML 代码实现背景图的方法

<style>
.class {width: 200px;height: 200px;background: url ("图片路径") no-repeat;}
</style>
<div class="class">
<p> 你的文字内容 </p>
</div>

懒得找图，就用轻刻年轮的，PS 一下

经过代码实测，不断调整大小

最终确定宽 350px，高 165px

命名为 backspring.jpg

期间采用了 PicPick 在浏览器上量长度

标尺工具

修改后的代码

<style>
.class {width: 350px;height: 165px;background: url("https://cdn.jishusongshu.com/images/2020/01/backspring.jpg?x-oss-process=style/webp") no-repeat;}
</style>
<div class="class">
<h5><center><font color=#FFF7DA > - 春节倒计时 - </font></center></h5>
<center><p><font color=#A94242 >2020 年 1 月 25 日<br>农历正月初一 星期六<br>庚子年(鼠年)倒计时</font></p><h5><strong>
<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>
</strong></h5></center>
</div>
<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>

将上面改后的代码写入增强文本到侧边栏

最终实现效果

代码和原图已打包，分享给大家

2021新年倒计时

<div class="class">
<h5><center><font color=#FFF7DA> - 春节倒计时 - </font></center></h5>
<center><p><font color=#A94242 >2021 年 2 月 12 日<br>农历正月初一 星期五<br>辛丑年(牛年)倒计时</font></p><h5><strong>
<div id="CountMsg" class="HotDate">
<span id="t_d">6 天 </span>
<span id="t_h">9 时 </span>
<span id="t_m">7 分 </span>
<span id="t_s">42 秒 </span>
</strong></h5></center>
</div>

function getRTime() {
var EndTime = new Date('2021/02/12 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);

.class {width: 300px;height: 142px;background: url("https://cdn.jishusongshu.com/images/img/backspring.jpg") no-repeat;}

由于直接在侧边栏添加js和css导致首页样式错乱，我就分离引入了。

下载链接：
https://www.lanzoui.com/b0djo3wuh
提取码： 点击复制

关注公众号，了解更多精彩

关注

相关推荐

使用 CardLink 库生产卡片式链接

[WordPress]懒加载插件a3 Lazy …

留言添加访客操作系统及浏览器

网站用户显示QQ头像（加密），…

[WordPress]免费夜间模式插件Da…