小程序列表倒计时

2019-11-15  本文已影响0人  王芊芊

例:定金倒计时函数——直接上代码~

  countDownDeposit() {

    // 获取当前时间,同时得到结束时间

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

    let timeDepoist = this.data.timeDepoist;    //结束时间

    // 对结束时间进行处理渲染到页面

    let endTime = new Date(timeDepoist).getTime();

    let obj = null;

    let depositPayTime;

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

    if (endTime - newTime > 0) {

      let time = (endTime - newTime) / 1000;

      // 获取天、时、分、秒

      let hou = parseInt(time / 3600);

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

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

      obj = {

        hou: util.timeFormat(hou),

        min: util.timeFormat(min),

        sec: util.timeFormat(sec)

      }

      depositPayTime = '距离逾期:' + obj.hou + '小时' + obj.min + '分' + obj.sec + '秒'

    } else {

     //活动已结束,全部设置为'00'——此处因项目需求不显示到天

      obj = {

        // day: '00',

        hou: '00',

        min: '00',

        sec: '00'

      }

      depositPayTime = "您已逾期"

    }

    // 渲染,然后每隔一秒执行一次倒计时函数

    this.setData({ depositPayTime: depositPayTime })

    intervalDeposit = setTimeout(this.countDownDeposit, 1000);

    if (obj.hou == '00' && obj.min == '00' && obj.sec == '00'){

      clearTimeout(intervalDeposit)

    }

  },   / 注意:/intervalDeposit需提前定义   onUnload监听卸载页面时需清除定时器


注意:onShow,onLoad加载需要倒计时的数据时,只能有一个周期去获取数据(适个人情况而定),否则倒计时会出现无法清除的问题,倒计时会出现问题


效果如图

列表循环同理~如图⬇️

倒计时中循环列表数据 日时分秒倒计时-效果

写的不好多多谅解,能帮到某个小伙伴当然更好了~

爱工作,爱前端的妹子~

上一篇 下一篇

猜你喜欢

热点阅读