原生JS活动倒计时实现思路

由于一个活动页面里面有多个活动,所以用map去操作每一个对象,只有一个活动的话就不需要遍历了,活动分为距离活动开始和距离活动结束两个倒计时,自己可按需求增减代码。还有就是IOS不兼容时间用“-”连接,所以移动端的话要把“-”替换成“/”做一下兼容。
var timer = setInterval(function() {
	mapForItem:function() {
		data.map(function(item) {
			var startTime = new Date(item.timeStart.replace(/-/g, "/")).getTime() //获取活动开始时间戳
			var endtTime = new Date(item.timeEnd.replace(/-/g, "/")).getTime() //获取活动结束时间戳
			var currentTime = new Date().getTime() //获取当前时间戳
			var surplusTime = startTime - currentTime > 0 ? startTime - currentTime : endtTime - currentTime //计算距离活动开始/结束剩余时间
			item.hours =  Math.floor(surplusTime / (1000 * 60 * 60)) < 10 ? '0' + Math.floor(surplusTime / (1000 * 60 * 60)) : Math.floor(surplusTime / (1000 * 60 * 60)) //倒数小时
			surplusTime = surplusTime - (item.hours * 1000 * 60 * 60) //减去小时的时间戳
			item.minunts = Math.floor(surplusTime / (1000 * 60)) < 10 ? '0' + Math.floor(surplusTime / (1000 * 60)) : Math.floor(surplusTime / (1000 * 60)) //倒数分钟
			surplusTime = surplusTime - (item.minunts * 1000 * 60) //减去分钟的时间戳
			item.seconds = Math.floor(surplusTime / 1000) < 10 ? '0' + Math.floor(surplusTime / 1000) : Math.floor(surplusTime / 1000) //倒数秒数
			if(endtTime - currentTime < 1000) {
				//当剩余的时间戳小于1000时代表小于1秒,即可清除定时器
				clearInterval(timer)
				item.hours = '00'
				item.minunts = '00'
				item.seconds = '00'
			}
		})
	},
}, 1000)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值