javascript倒计时功能

假设有一个100000000的时间戳
那么总共就有100000秒(100000000 / 1000)
100000%60 就是去除掉整分钟数 剩下的秒数 就是秒占40
100000/60 是整的分钟数 总共1666分钟
100000/60%60 是分钟数不到一个小时的部分 为46 占2760 = 4660
100000/3600 是整的小时数为27
100000/3600%24 是小时数不到一天的部分 这里为3 占10800 = 3
6060
100000/3600/24 是整数天的天数这里为1 占86400 = 1
3600*24
上面加起来为100000 = 86400 (剩余天数,注意不是总天数) + 10800 (剩余小时数)
+ 2760 (剩余分钟数) + 40 (剩余秒)
如果不放心可以按照上面算一下

// 倒计时
/**
 * 
 * @param timstamp 时间戳的差值(结束时间的时间戳-当前时间的时间戳)
 */
export const deadLine = (timstamp) => {
  const mf = Math.floor
  const totalSecond = mf(timstamp/1000)
  const second = totalSecond%60
  const minut = mf(totalSecond/60)%60
  const hour = mf(totalSecond/3600)%24
  const day = mf(totalSecond/3600/24)
  return {
    day: padZero(day),
    hour: padZero(hour),
    minut: padZero(minut),
    second: padZero(second)
  }
}
// 不足两位数添加0,注意数据类型
export const padZero = (num) => {
  return num < 10 ? '0'+num : num
}

使用
function foo(time) {
	setTimeout(()=>{
		if (time>0) {
			foo(time-1000)
		}
	},1000)
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的JavaScript实现页面计时功能的示例代码: ``` // 设置计时的结束时间,这里设置为30秒后 var countDownDate = new Date().getTime() + 30000; // 更新计时的函数 var x = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算距离结束时间还剩余多少时间 var distance = countDownDate - now; // 将时间转换为分钟和秒数 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 将时间显示在页面上 document.getElementById("timer").innerHTML = minutes + "分" + seconds + "秒"; // 判断计时是否结束 if (distance < 0) { clearInterval(x); document.getElementById("timer").innerHTML = "时间到!"; } }, 1000); // 每秒钟更新一次计时 ``` 在以上代码中,我们首先设置了计时的结束时间,这里设置为30秒后。然后我们通过 setInterval() 函数来每秒钟更新一次计时。在更新计时的函数中,我们首先获取当前时间,然后计算距离结束时间还剩余多少时间。接着,我们将时间转换为分钟和秒数,并将时间显示在页面上。最后,我们判断计时是否结束,如果结束,则清除定时器并显示时间到了的提示信息。 您可以将以上代码复制到您的网页中,并将需要显示计时的元素的 id 修改为“timer”,即可实现页面计时功能。希望能对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值