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

最新推荐文章于 2022-10-28 00:28:12 发布

逍遥生-前端

最新推荐文章于 2022-10-28 00:28:12 发布

阅读量3.8k

点赞数

分类专栏：案例文章标签：倒计时 30分钟倒计时 JS做30分钟倒计时

本文链接：https://blog.youkuaiyun.com/u012562411/article/details/85220889

版权

今天在做支付宝小程序的一个功能时，面对这样一个需求，有一个订单，对于未付款的订单需要做一个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' + seco