小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,上一篇文章我是介绍了 #uni.app 运行到微信小程序 引入阿里字体图标 iconfont，今天我来给大家实现一个简单又很实用的倒计时功能;功能虽然简单,但是很奇怪我每次都不能徒手把代码写出来,二手直接复制此代码过去;无疑我这个人就个工具人,搬砖程序员;大家不要学我啊!
正文开始啦~
要实现的效果是这样的
代码实现过程
首先我们先来屡一下逻辑
把时间差转换为天数、小时数、分钟数和秒数来显示。主要是以%取模来运算。得到剩余结束时间的毫秒数（剩余毫秒数），
除以 1000 得到剩余秒数，再除以 60 得到剩余分钟数，再除以 60 得到剩余小时数。除以 24 得到剩余天数。
剩余秒数 time/1000 % 60 得到秒数，剩余分钟数 time/(1000 * 60) %60 得到分钟数，
剩余小时数time/(1000 * 60 * 60) %24 得到小时数。
后台会传一个倒计时结束时间给你;那么只需要那这个参数传进我写下面写的方法里面去了
HTML部分
<body>
<div id="countdown"></div>
</body>
<script>
let timer
let timeEvent = document.getElementById("countdown");
function countdown() {
let nowTime = new Date(); //当前的时间
let endTime = new Date("2021/11/02"); //结束的时间
//上面只是我写死的日期,后台传的结束时间数据是时间戳可以省略上面一步
let timeLog = endTime.getTime() - nowTime.getTime(); //时间差
//一步得出的时间戳是毫秒的;顺便普及一下知识:10位数的时间戳是秒,13位的时间戳是毫秒;
let day = Math.floor(timeLog / (1000 * 60 * 60 * 24)); //获取天数
let hour = Math.floor((timeLog / (1000 * 60 * 60)) % 24); //获取小时
let min = Math.floor((timeLog / (1000 * 60)) % 60); //获取分钟
let sec = Math.floor((timeLog / 1000) % 60); // 获取秒数
//所以显示数据为0时清除定时器
if (day==0 && hour==0 && min==0 && sec == 0) {
clearInterval(timer);
countdown.style.display = "none";
}
if (day == 0) {
return (hour<10?'0'+hour:hour) + ":" + (min<10?'0'+min:min) + ":" + (sec<10?'0'+sec:sec);
} else {
return (day<10?'0'+day:day) + "天" + " " + (hour<10?'0'+hour:hour) + ":" + (min<10?'0'+min:min) + ":" + (sec<10?'0'+sec:sec);
}
}
//设置一个倒计时,每秒执行一次
timer = setInterval(() => {
timeEvent.innerHTML = countdown();
}, 1000);
</script>
结语:
好了到这里文章就结束了,我发现我对时间戳不敏感;有时候有个蒙;实现的方法有多种;你们慢慢挖掘吧;
希望这篇文章能帮到大家;然后 ( 点赞+评论+关注 ) 有问题可以来互相交流一下
