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随机颜色代码的多种实现方式
Apr 23 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
原生JS实现不断变化的标签
May 22 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
js数据类型检测总结
Aug 05 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
推荐几个不错的console调试技巧实现
Dec 20 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
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
优良学风班总结材料
2014/02/08 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2019年思想汇报
2019/06/20 职场文书
员工给公司的建议书
2019/06/24 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python