打开: 你博客目录/themes/anzhiyu/source/js
在里面新建一个.js文件,例如我新建了一个clock.js文件 编辑文件,加入下面代码
// 设置倒计时的目标日期
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文件)加入下面代码即可实现
<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"></div> <!-- 修正后的类名 -->
</body>
|
参数 | 注释 | 可改值 |
---|
50px | 大小 | 可以看一下这个 |
/js/clock.js | 文件位置 | /js/文件名.js, 文件名为你刚创建的文件名 |
评论