微信小程序——倒计时功能

做小程序项目中，需要做一个倒计时功能，如下图：

记录一下实现步骤：

1.考虑到这个功能可能会有多处用到，所以把倒计时的函数写在utils.js里面：

const formatNumber = n => {

  n = n.toString()

  return n[1] ? n : '0' + n

}

// 倒计时

function countDown(that) { //倒计时函数

  let newTime = new Date().getTime();

  let endTime = that.data.endTime;

  let remainTime = endTime - newTime;

  let obj = null;

  let t = '';

  // 如果活动未结束，对时间进行处理

  if (remainTime > 0) {

    let time = remainTime / 1000;

    // 获取天、时、分、秒

    let day = parseInt(time / (60 * 60 * 24));

    let hou = parseInt(time % (60 * 60 * 24) / 3600);

    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);

    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);

    obj = {

      day: formatNumber(day),

      hou: formatNumber(hou),

      min: formatNumber(min),

      sec: formatNumber(sec)

    }

  }

  t = setTimeout(function() {

    that.setData({

      countDownTxt: obj

    });

    countDown(that)

  }, 1000)

  if (remainTime <= 0) {

    clearTimeout(t);

  }

}

module.exports = {

　　countDown: countDown,

}

2.在目标页面的js里面引用该js，并执行倒计时方法：

//获取应用实例

var app = getApp();

var ss = require('../../../utils/utils.js')

Page({

  /**

   * 页面的初始数据

   */

  data: {

    nowTime: new Date().getTime(), //获取当前日期

    endTime: 1533177202000,//结束日期时间戳

    remainTime: null,

    countDownTxt:null,

  },

  onLoad: function(options) {

    this.setData({

      remainTime: this.data.endTime - this.data.nowTime

    })

  },

  onShow: function() {

      ss.countDown(this);

  },

})

wxml:

<view class="course-countdown">

  <block wx:if="{{remainTime>0}}">

    <text class='block fs-28'>距活动结束:</text>

    <view class="countdown-result fs-24 mt-5">

      <text>{{countDownTxt.day}}</text> 天

      <text>{{countDownTxt.hou}}</text> 时

      <text>{{countDownTxt.min}}</text> 分

      <text>{{countDownTxt.sec}}</text> 秒

    </view>

  </block>

  <block wx:else>

    <text class="fs-28">该活动已结束</text>

  </block>

</view>

O啦~~~

巴特西

微信小程序——倒计时功能

最新文章

热门文章