给你的博客加上一个十年倒计时吧


效果预览 关于 fishcpy的小破站

打开: 你博客目录/themes/anzhiyu/source/js

在里面新建一个.js文件,例如我新建了一个clock.js文件
编辑文件,加入下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 设置倒计时的目标日期
var countDownDate = new Date("September 6, 2034 00:00:00").getTime();

// 更新倒计时每秒
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;

// 计算天、小时、分钟和秒
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// 显示结果
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";

// 如果倒计时结束,显示消息
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "你发现了彩蛋";
}
}, 1000);
参数 注释 可改值
你发现了彩蛋 倒计时结束的文字 随意
September 6 日期 英文月份+日期
2034 00:00:00 日期 年份+具体时间

在你要的文件里(本人仅测试了md文件)加入下面代码即可实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.big-font {
font-size: 50px; /* 你可以根据需要调整这个大小 */
font-weight: bold;
}

</style>

<body>

<div id="countdown" class="big-font"></div> <!-- 应用大字体样式 -->

<script data-pjax defer src='/js/clock.js'></script>
<div class=".pjax-reload">
</body>
参数 注释 可改值
50px 大小 可以看一下这个
/js/clock.js 文件位置 /js/文件名.js, 文件名为你刚创建的文件名
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容