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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
在vue中使用Autoprefixed的方法
Jul 27 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JavaScript中的几种继承方法示例
Dec 06 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 快速生成 Flash 动画的方法
2007/03/06 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
如何用python免费看美剧
2020/08/11 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
全民健身日活动方案
2014/01/29 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
Python 统计序列中元素的出现频度
2022/04/26 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python