学习,
让视野更宽阔!

新年倒计时展示(附源码)

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

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

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

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

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

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://www.jishusongshu.com/wp-content/uploads/2020/01/backspring.jpg") 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>

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

最终实现效果

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


下载链接:
https://www.lanzous.com/b0djo3wuh
提取码:


本文采用CC BY-NC-SA 3.0 Unported协议进行许可
转载请注明出处:https://mp.weixin.qq.com/s/OMa09sG91SDeWvvc_zYoNg
转载请注明出处:技术松鼠 » 新年倒计时展示(附源码)

评论 抢沙发

技术松鼠