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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
客户经理岗位职责
2013/12/08 职场文书
项目管理计划书
2014/01/09 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
模范教师事迹材料
2014/02/10 职场文书
学生周末长期请假条
2014/02/15 职场文书
追悼词范文大全
2015/06/23 职场文书