案例-做一个30分钟倒计时

案例 专栏收录该内容
3 篇文章 0 订阅

今天在做支付宝小程序的一个功能时,面对这样一个需求,有一个订单,对于未付款的订单需要做一个30分钟的倒计时功能,提醒用户还有多少秒支付时间,格式为29:59。
其他的细节就不详细介绍了,下面着重介绍一下计时器功能怎么做,以及优化。

例如我现在的时间是"2018-12-20 09:22:00", 我需要计算"2018-12-20 09:20:00"这个目标时间的倒计时。

首先在公共JS中定义一个timer方法,这个方法需要一个参数,即目标时间。
这个参数格式必须符合日期格式,可以是时间戳,也可以是标准时间。

function timer(val) {
  var nowTime = new Date();
  var createdTime = new Date(val);
  var TIME = 1000 * 60 * 30;
  // 目标时间和当前时间的毫秒数
  var differ = nowTime - createdTime;
  // 目标时间超过当前时间,或目标时间与当前时间的差超过30分钟则返回0
  if (differ < 0 || differ > TIME) {
    return 0;
  };
  // 剩余时间的秒数
  differ = TIME - differ;
  // 计算分钟数
  var minute = Math.floor(differ / (60 * 1000));
  minute = minute < 10 ? '0' + minute : minute;
  // 计算秒数
  var second = Math.floor((differ - minute * (60 * 1000)) / 1000);
  second = second < 10 ? '0' + second : second;
  // 返回结果格式 29:59
  return minute + ':' + second;
}

// 调用方法
var time = timer("2018-12-20 09:20:00"); // 28:00

接下来我们优化一下,30秒固定死了,我想灵活一点。

那就再传入一个参数!

function timer(val, timeInterval) {
  var nowTime = new Date();
  var createdTime = new Date(val);
  var TIME = 1000 * 60 * timeInterval;
  // 目标时间和当前时间的毫秒数
  var differ = nowTime - createdTime;
  // 目标时间超过当前时间,或目标时间与当前时间的差超过30分钟则返回0
  if (differ < 0 || differ > TIME) {
    return 0;
  };
  // 剩余时间的秒数
  differ = TIME - differ;
  // 计算分钟数
  var minute = Math.floor(differ / (60 * 1000));
  minute = minute < 10 ? '0' + minute : minute;
  // 计算秒数
  var second = Math.floor((differ - minute * (60 * 1000)) / 1000);
  second = second < 10 ? '0' + second : second;
  // 返回结果格式 29:59
  return minute + ':' + second;
}

// 调用方法
var time1 = timer("2018-12-20 09:20:00", 30); // 我需要做30分钟的倒计时
console.log(time1); // 28:00
var time2 = timer("2018-12-20 09:20:00", 60);
console.log(time2); // 58:00

如果想扩展成其他的,比如扩展"01:59:59"格式,可以从这个案例中进行修改。

  • 0
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值