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

579次阅读
没有评论

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

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

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

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

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

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

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

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

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("http://cdn.jishusongshu.com/images/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>

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

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

最终实现效果

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

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

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.lanzous.com/b0djo3wuh 提取码:


本文采用CC BY-NC-SA 3.0 Unported协议进行许可 转载请注明出处:https://mp.weixin.qq.com/s/OMa09sG91SDeWvvc_zYoNg
1
松鼠小
版权声明:本站原创文章,由松鼠小2020-01-21发表,共计3692字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
隐藏
变装