使用moment实现倒计时
代码走起：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
距离24小时之后还剩：<span id="sp1"></span>天<span id="sp2"></span>小时<span id="sp3"></span
>分<span id="sp4"></span>秒
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
let sp1 = document.getElementById("sp1");
let sp2 = document.getElementById("sp2");
let sp3 = document.getElementById("sp3");
let sp4 = document.getElementById("sp4");
// 再来一个使用了moment库实现的倒计时
function showTime(time) {
let start = moment(new Date()); //获取开始时间
let end = moment(new Date(time)); //结束时间
let diff = end.diff(start); //时间差
var timediff = Math.round(diff / 1000);
//获取还剩多少天
var day = parseInt(timediff / 3600 / 24);
//获取还剩多少小时
var hour = parseInt((timediff / 3600) % 24);
//获取还剩多少分钟
var minute = parseInt((timediff / 60) % 60);
//获取还剩多少秒
var second = timediff % 60;
//输出还剩多少时间
sp1.innerHTML = day;
sp2.innerHTML = timerFilter(hour);
sp3.innerHTML = timerFilter(minute);
sp4.innerHTML = timerFilter(second);
console.log(
day +
"天" +
timerFilter(hour) +
"小时" +
timerFilter(minute) +
"分" +
timerFilter(second) +
"秒"
);
//给小于10的数值前面加 0
function timerFilter(params) {
if (params - 0 < 10) {
return "0" + params;
} else {
return params;
}
}
window.requestAnimationFrame(() => {
showTime(time);
});
}
let now = Date.now() + 60 * 1000 * 60 * 24;
showTime(now);
</script>
</body>
</html>
