页面倒计时的写法

倒计时一般有hh:mm:ss和mm两种格式的倒计时
写法一、es6
1、声明类Timer
/**

  • 类说明
  • @class Timer
  • @constructor
    /
    export default class Timer {
    /
    *
    • http请求
    • @constructor
    • @param {Object}
    •  count: 		计时数量, 默认60
      
    •  progress: 		计时进度事件
      
    •  complete: 		计时结束事件
      
    • @return {Number}
      /
      constructor (options) {
      this.options = options
      this.count = options.count || 60
      this.setIntervalNum = null
      return this.start()
      }
      // 倒计时入口
      start () {
      this.setIntervalNum = window.setInterval(() => { this.enterFrame() }, 1000)
      this.enterFrame()
      return this
      }
      // 开始倒计时
      enterFrame () {
      this.count–
      if (this.options.progress) this.options.progress(this.count)
      if (this.count == 0) {
      if (this.options.complete) this.options.complete()
      this.stop()
      }
      }
      // 停止倒计时
      stop () {
      window.clearInterval(this.setIntervalNum)
      }
      }
      2、使用new Timer
      用法1、60s倒计时
      this.countdown = new Timer({ count: 60, progress: (num) => { this.timer = num; } }); }
      if (this.timerOk && this.countdown) {
      this.countdown.stop();
      this.timer = 0;
      }
      用法2、hh:mm:ss 格式倒计时
      this.timerDown && this.timerDown.stop();
      this.timerDown = new Timer({
      count: time,
      progress: res => {
      const min = Math.floor(res % 3600);
      this.hh =
      Math.floor(res / 3600) < 10
      ? “0” + Math.floor(res / 3600)
      : Math.floor(res / 3600);
      this.mm =
      Math.floor(min / 60) < 10
      ? “0” + Math.floor(min / 60)
      : Math.floor(min / 60);
      this.ss = res % 60 < 10 ? “0” + res % 60 : res % 60;
      if (this.hh === “00” && this.mm === “00” && this.ss === “00”) {
      }
      },
      complete: () => {
      // 定时器结束
      }
      });
      写法二、10s倒计时
      1、定义公用方法 // 时间转化为毫秒
      function remainFormatDuring (mss) {
      let timeObj = {}
      timeObj.days = parseInt(mss/(1000 * 60 * 60 * 24))
      timeObj.hours = parseInt((mss%(1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      timeObj.minutes = parseInt((mss%(1000 * 60 * 60)) / (1000 * 60 * 60))
      timeObj.seconds = parseInt((mss%(1000 * 60)) / 1000)
      if (timeObj.hours < 10) {
      timeObj.hours = ‘0’ + timeObj.hours
      }
      if (timeObj.minutes < 10) {
      timeObj.minutes = ‘0’ + timeObj.minutes
      }
      if (timeObj.seconds < 10) {
      timeObj.seconds = ‘0’ + timeObj.seconds
      }
      let date = new Date(mss)
      timeObj.minsec = date.getMilliseconds
      return timeObj
      }
      2、使用
      Page({
      data: {
      countDown: 10, // 倒计时10s
      TIMEOUT_TIMMER: null,
      timeout: 0
      },
      onLoad: function() {
      // 诸葛埋码
      new App.global.ZhugeTrack().trackPage(‘限流页’, ‘性能’, ‘无’,{},true);
      this.setTimeDown(this.data.countDown)
      },
      onShow: function() {
      },
      onUnload:function () {
      this.clearTime() // 清除定时器
      },
      // 返回上一页
      goBack () {
      App.href({
      type:‘navigateBack’,
      data:{delta:1}
      })
      },
      setTimeDown (time) {
      this.setData({
      timeout: time * 1000
      })
      let that = this
      this.clearTime()
      this.TIMEOUT_TIMMER = setInterval(() => {
      that.setData({
      timeout: Math.max(0, that.data.timeout - 1000)
      })
      let time = Util.remainFormatDuring(that.data.timeout) // 公用方法时间转化为毫秒
      let day = parseInt(time.days)
      let hours = time.hours
      let minutes = time.minutes
      let seconds = time.seconds
      that.setData({
      countDown: parseInt((day
      246060) + (hours6060) + (minutes*60) + seconds)
      })
      if (that.data.timeout <= 0) {
      that.clearTime() // 清除定时器
      }
      }, 1000);
      },
      // 清除定时器
      clearTime () {
      if (this.TIMEOUT_TIMMER) {
      clearInterval(this.TIMEOUT_TIMMER)
      }
      }
      })
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值