JS实现倒计时(可多数据)

场景：如活动列表进行倒计时(多个时间同时倒计时)。
实现：

1. 在展示列表的数据集合中加入天、时、分、秒等倒计时属性。

list.forEach(item =>{item.lastDay = 0; //天item.lastHour = 0; //时item.lastMinute = 0; //分item.lastSecond = 0; //秒
})

2. 封装方法，读取集合数据进行运算赋值。

function getLastTime(){for(var i = 0; i < list.length; i++){var orderTime = new Date().getTime();//当前时间var finshTime = new Date(list[i].ordTime);finshTime.setDate(finshTime.getDate() + 1);var endTime = finshTime.getTime();//获取下单时间后的同一天的同一时间var distanceTime = endTime - orderTime; //间隔时间if(distanceTime > 0){var dd = Math.floor(distanceTime / 1000 / 60 / 60 / 24);var hh = Math.floor((distanceTime / 1000 / 60 / 60) % 24);var mm = Math.floor((distanceTime / 1000 / 60) % 60);var ss = Math.floor((distanceTime / 1000) % 60);dd = dd > 9 ? dd : '0' + dd;hh = hh > 9 ? hh : '0' + hh;mm = mm > 9 ? mm : '0' + mm;ss = ss > 9 ? ss : '0' + ss;list[i].lastDay = dd;//天list[i].lastHour = hh;//时list[i].lastMinute = mm;//分list[i].lastSecond = ss;//秒}else{list[i].lastDay = 0;//天list[i].lastHour = 0;//时list[i].lastMinute = 0;//分list[i].lastSecond = 0;//秒}}
}

3. 调用方法(可在获取数据源的地方调用)

setInterval(function(){_this.getLastTime();
},1000)

JS实现倒计时(可多数据)相关推荐

js php 获取时间倒计时_,js实现倒计时及时间对象
JS实现倒计时效果代码如下: 无标题文档h #box { width: 100%; height: 400px; background: black; color: #fff; font-size:4 ...
Ext JS 4倒计时：开发者预览版
作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版发布了.Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架.从生成HTML代码到类 ...
html 倒计时特效,JS节日倒计时特效(精确到毫秒)
JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...
原生JS活动倒计时实现思路
原生JS活动倒计时实现思路由于一个活动页面里面有多个活动,所以用map去操作每一个对象,只有一个活动的话就不需要遍历了,活动分为距离活动开始和距离活动结束两个倒计时,自己可按需求增减代码.还有就是I ...
分享75个JS特效倒计时，总有一款适合您
分享75个JS特效倒计时,总有一款适合您 75个JS特效倒计时下载链接:https://pan.baidu.com/s/1SntVvt85nhN3JgqcsTFY6Q?pwd=q27q 提取码:q2 ...
JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒（小时数累加）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...
html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...

JS实现倒计时(可多数据)

JS实现倒计时(可多数据)相关推荐

最新文章

热门文章