一. 前言
定时器是我们平常开发中比较常见的功能,定时开启关闭功能、定时操作、商品优惠倒计时等都是常用功能,接下来我就使用原生js进行24小时倒计时封装.
二. 实现思路
1. 定义标签,获取节点,赋初始值,定义累减时间戳的标识
2. 首先定义方法,需要有三个形参,分别是时间,时间+24小时,累减时间戳的标识
- 此处注意时间格式尽量使用标准时间格式,避免时间戳转换出现问题
- 累减时间戳的标识初始为0 用于时间戳累减运算
3. 分别转换两个时间为时间戳,临近时间减偏远时间减(标识*1000)/1000,通过公式运算其他时间
4.数字补零,拼接展示
5.开启定时器一秒间隔,标识逐次递增用于运算,方法传递实参
三. 代码注释详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="date"></div>
</body>
<script>
dateTXT = document.querySelector('.date')
// 赋初始值
dateTXT.innerHTML = `00天00时00分00秒`
function fn() {
// 定义递减时间戳的累计值
let num = 0
// 存储定时器
let setIntervalFlag
function countDown(times1, times2) {
// 转换为时间戳
var a = +new Date(times1)
var b = +new Date(times2)
// 转换为天时分秒
var time = (b - a - num * 1000) / 1000;
console.log(time);
// 倒计时结束拦截清除定时器,以及其他逻辑
if (time==0) {
clearInterval(setIntervalFlag)
console.log('倒计时结束');
}
var d = parseInt(time / 60 / 60 / 24)
var h = parseInt(time / 60 / 60 % 24)
var m = parseInt(time / 60 % 60)
var s = parseInt(time % 60)
// 数字补零
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
// 拼接展示,可根据需求做调整
dateTXT.innerHTML = d + '天' + h + '时' + m + '分' + s + '秒'
}
// 开启定时器每隔一秒调用一次
setIntervalFlag = setInterval(() => {
// 递减时间戳的累计值递增
num++
countDown('2023-2-24 17:15:00', '2023-2-24 17:15:03')
}, 1000)
}
fn()
</script>
<style>
.date {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
font-size: 24px;
color: lawngreen;
}
</style>
</html>
