写了个网页版的顶级国际域名证书

今天逛良(凉)心云想看下域名什么时候到期,发现里面有个域名证书感觉还不错,于是突发奇想花了半天时间搞了个网页版的域名证书

其实内容和原来几乎一样,唯独多了个域名续费倒计时:

实现思路

目标时间 - 当前时间 = 剩余时间

当前时间

先计算当前时间用于显示证书打印日期,需要注意的是getMonth()的返回值需要加 1 才能得到实际的月份,因为它的索引值是从 0 到 11。

另外getDate()getDay()要注意区分,后者是返回一周中的第几天(0 代表周日)。

1
2
3
4
let current = new Date(); // 获取到当前中国标准时间
let year = current.getFullYear(); // 获取年份
let month = current.getMonth() + 1; // 获取月份
let date = current.getDate(); // 获取日份

可以再完善一下,给月份和日份加个判断,如果它们的长度为 1 就在前面加个 0。

1
2
3
4
5
6
if (String(month).length === 1) {
month = "0" + month;
}
if (String(date).length === 1) {
date = "0" + date;
}

剩余时间

首先计算出剩余时间的毫秒数,再将毫秒分别转换为天、小时、分钟和秒。

1
2
3
4
5
6
7
8
9
10
11
let target = new Date("2023/10/16 21:45:32"); // 设置域名过期时间
let currentTime = current.getTime(); // 获取当前时间戳
let targetTime = target.getTime(); // 获取目标时间戳
let remainingTime = targetTime - currentTime; // 计算剩余时间戳

let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); // 天
let hours = Math.floor(
(remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
); // 小时
let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 秒

出于美观考虑建议给它们前面都补个零,天数加不加都行,无所吊谓 😒

1
2
3
4
5
6
7
8
9
if (String(hours).length === 1) {
hours = "0" + hours;
}
if (String(minutes).length === 1) {
minutes = "0" + minutes;
}
if (String(seconds).length === 1) {
seconds = "0" + seconds;
}

更新时间

封装一个updateCountdown()的函数,将以上代码包裹在内。

1
2
3
function updateCountdown() {
...
}

开启setInterval计时器,设置每秒钟更新一次倒计时。

1
let timer = setInterval(updateCountdown, 1000);

当剩余时间为 0 时清除定时器,一定要放到updateCountdown()里面才能更新倒计时。

1
2
3
if (remainingTime <= 0) {
clearInterval(timer);
}

最后,一个简单的域名续费倒计时就大功告成了!

我已将源码开源到了 GitHub,如果大家觉得还有什么需要改进的地方,欢迎向我提 issuesPull requests


写了个网页版的顶级国际域名证书
https://blog.xukaiyyds.cn/posts/882f8368/
作者
xukaiyyds
发布于
2023年9月9日
更新于
2024年4月10日
许可协议