小程序倒计时功能

  <view class="time-item">
                <text class="time-item"> 距结束:</text>

                <text class="time_show">{{countDownDay}}</text>
                天
                <text class="time_show">{{countDownHour}}</text>
                时
                <text class="time_show">{{countDownMinute}}</text>
                分
                <text class="time_show">{{countDownSecond}}</text>
                秒

            </view>
    data:{
      countDownDay: 0,
      countDownHour: 0,
      countDownMinute: 0,
      countDownSecond: 0,
}
  /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
      var totalSecond =100;//倒计时时间

      var interval = setInterval(function () {
        // 秒数
        var second = totalSecond;

        // 天数位
        var day = Math.floor(second / 3600 / 24);
        var dayStr = day.toString();
        if (dayStr.length == 1) dayStr = '0' + dayStr;

        // 小时位
        var hr = Math.floor((second - day * 3600 * 24) / 3600);
        var hrStr = hr.toString();
        if (hrStr.length == 1) hrStr = '0' + hrStr;

        // 分钟位
        var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
        var minStr = min.toString();
        if (minStr.length == 1) minStr = '0' + minStr;

        // 秒位
        var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
        var secStr = sec.toString();
        if (secStr.length == 1) secStr = '0' + secStr;

        this.setData({
          countDownDay: dayStr,
          countDownHour: hrStr,
          countDownMinute: minStr,
          countDownSecond: secStr,
        });
        totalSecond--;
        if (totalSecond < 0) {
          clearInterval(interval);
          wx.showToast({
            title: '活动已结束',
          });
          this.setData({
            countDownDay: '00',
            countDownHour: '00',
            countDownMinute: '00',
            countDownSecond: '00',
          });
        }
      }.bind(this), 1000);

    },

https://blog.csdn.net/yishengzhiai005/article/details/77099808

发布了69 篇原创文章 · 获赞 17 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/Acitylion/article/details/90749554
今日推荐