js实现页面的多个日期时间倒计时效果（多个拼团）

js的日期倒计时在日常项目中还是比较常用的，活动、拼团功能最为常见；
先分析最要是处理好日期函数，然后一个页面上有多个倒计时情况下的方法；
来，先看下 拼多多 的拼单倒计时的效果：

那么，先上个代码吧：
案例效果：

 <style>.mytime{ line-height: 40px; width: 300px; margin: 0 auto;}</style><div class="mytime jsTime" data-time="2019-04-01 16:58:00">时间1</div>
<div class="mytime jsTime" data-time="2019-04-04 18:00:02">时间2</div>
<div class="mytime jsTime" data-time="2019-04-05 19:01:31">时间3</div>
<div class="mytime jsTime" data-time="2019-04-06 05:05:15">时间4</div>
<div class="mytime jsTime" data-time="2019-04-07 09:01:43">时间5</div>
<hr>
<div class="mytime jsTime2" data-time="2019-04-08 16:30:05">时间1</div>
<div class="mytime jsTime2" data-time="2019-04-09 14:01:22">时间2</div>
<div class="mytime jsTime2" data-time="2019-04-10 18:06:25">时间3</div>
<div class="mytime jsTime2" data-time="2019-04-11 22:07:19">时间4</div>
<div class="mytime jsTime2" data-time="2019-04-12 23:12:38">时间5</div>

<!-- 方法1 -->
<script>const countdown = {domList : document.querySelectorAll('.jsTime'),formatNumber(n){// return n.toString().padStart(2, '0');  // 用padStart方法要注意兼容问题n = n.toString();return n[1] ? n : '0' + n;},setTime(dom){//获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();if (leftTime >= 0) {const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);const m = Math.floor(leftTime / 1000 / 60 % 60);const s = Math.floor(leftTime / 1000 % 60);dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;} else {clearInterval(dom.$timer);dom.innerHTML = '拼团已结束';}},start(){this.domList.forEach((dom) => {this.setTime(dom);dom.$timer = setInterval(() => {this.setTime(dom);}, 1e3);});},};countdown.start();
</script>

<!-- 方法2 -->
<script>//时间格式处理const formatNumber = n => {n = n.toString();return n[1] ? n : '0' + n;};//团购倒计时const teamCountTime = (obj) => {var timer = null;function fn(){//获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');//获取当前时间var date    = new Date(),now     = date.getTime(),endDate = new Date(setTime),end     = endDate.getTime();//时间差var leftTime = end - now;//d,h,m,s 天时分秒var d, h,m,s;var otime = '';if (leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24);h = Math.floor(leftTime / 1000 / 60 / 60 % 24);m = Math.floor(leftTime / 1000 / 60 % 60);s = Math.floor(leftTime / 1000 % 60);if (d <= 0) {otime = [h, m, s].map(formatNumber).join(':');} else {otime = d + '天' + [h, m, s].map(formatNumber).join(':');}obj.innerHTML = '剩余' + otime;//timer = setTimeout(fn, 1e3);} else {clearTimeout(timer);obj.innerHTML = '拼团已结束';}}fn();};let jsTimes = document.querySelectorAll('.jsTime2');jsTimes.forEach((obj) => {teamCountTime(obj);});
</script>

js实现页面的多个日期时间倒计时效果（多个拼团）相关推荐

html英文日期js,JS网页上显示中英文版日期时间(根据电脑上的时间)
JS网页上显示中英文版日期时间(根据电脑上的时间) <script language="javascript"> function shownowtime() { va ...
Day.js —— 一个轻量型的日期时间库 moment 的完美代替品
对于日期时间处理,常见有moment.js luxon等库,然而这些库在个人看来有点大了,而平常人往往只用到其中个别功能,这就有点浪费,当然也可以抽取想要模块,但稍显繁琐.对于这种情况,我一般喜欢自己 ...
苹果ios用js的Date() 获取到的日期时间显示NaN
ios使用如下方法获得NaN,安卓手机则是正常计算,解决方法是换个这个时间的格式 new Date("2017-04-28 23:59:59").getTime() 换成如下方式就 ...
jsp页面获取系统的日期时间
<%@page import="java.util.Date"%>  <%@ page language=&q ...
tp5中渲染页面将时间戳转换为日期时间格式（Y-m-d H:i:s）
代码 {volist name="userlist" id="vo"}<tr class="text-c"><td> ...
固定日期时间倒计时，倒计时不可点击，普通倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
收集几个js实现的日期时间控件
/**//** *大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 & ...
SPL 的日期时间函数
在数据分析计算中,日期时间类数据是比较特殊的类型,这里我们就来研究一下如何在SPL中使用日期时间类数据. 1日期时间数据的转换和生成日期时间类数据,通常会用字符串来输入或显示.在使用集算器时,可以点 ...
html5在线天数计时器,HTML倒计时效果：天、时、分、秒 | 固定时间倒计时
需求分析: 希望制作一个固定时间倒计时效果,比如某某活动在4小时之后结束,点开网页,触发倒计时事件,开始4小时倒计时.考虑使用setInterval定时器,在时间为0后,clearInterval清除 ...
数据库日期时间显示在页面上格式错误的解决方案
做项目过程中肯定会碰到这样一个问题:在数据库中存的是date或datetime类型的值,从数据库里取出来遍历到页面上显示的是long类型或是GTM类型的日期时间. 对于这个问题,经过研究之后有以下结论 ...

js实现页面的多个日期时间倒计时效果（多个拼团）

js实现页面的多个日期时间倒计时效果（多个拼团）相关推荐

最新文章

热门文章