js实现页面多个日期时间倒计时效果


Posted in Javascript onJune 20, 2019

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

来,先看下 拼多多 的拼单倒计时的效果:

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>

具体代码可访问本人github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
javascript常用的设计模式
Feb 09 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 #Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 #Javascript
JS实现的简单tab切换功能完整示例
Jun 20 #Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
javascript获取select值的方法完整实例
Jun 20 #Javascript
node基于async/await对mysql进行封装
Jun 20 #Javascript
You might like
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php 文件上传类代码
2011/08/06 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
js转换对象为xml
2017/02/17 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
《秋姑娘的信》教学反思
2014/02/28 职场文书
批评与自我批评总结
2014/10/17 职场文书
机器人总动员观后感
2015/06/09 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
iPhone13将有八大升级
2021/04/15 数码科技