小程序商城计时器

自制小程序商品列表计时器

看了很多人写的计时器都是直接秒更新页面数据，亲自测试了一下真的是不能用。。页面数据稍微多一点直接就一闪一闪亮晶晶不能看啊。
下边是用小程序comPonent实现的列表计时器，话不多说直接上code

 js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num:Number
  },
  observers: {//监听页面数据的传入启动计时器
    'num': function(num) {
      this.interVal(num);
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    timeTex:"",
    allInterVal:null
  },
  detached:function(){
    let that = this;
   clearInterval( that.data.allInterVal);
  },
  methods: {//这里是方法体
    interVal:function (num) {
      let that =this;
      let intNum = Math.floor(num/1000) ;
      setInterval(function () {
        intNum = intNum - 1 ;
        if (intNum > 0) {
          // 天数位
          let day = Math.floor(intNum / 3600 / 24);
          let dayStr = day.toString();
          dayStr.length == 1 ? dayStr = '0' + dayStr : dayStr = dayStr;
          // 小时位
          let hr = Math.floor((intNum - day * 3600 * 24) / 3600);
          let hrStr = hr.toString();
          hrStr.length == 1? hrStr = '0' + hrStr:hrStr = hrStr;
          // 分钟位
          let min = Math.floor((intNum - day * 3600 * 24 - hr * 3600) / 60);
          let minStr = min.toString();
          minStr.length == 1? minStr = '0' + minStr:minStr =  minStr;
          // 秒位
          let sec = Math.floor(intNum - day * 3600 * 24 - hr * 3600 - min * 60);
          let secStr = sec.toString();
          secStr.length == 1? secStr = '0' + secStr:secStr  + secStr;
          let endtime=dayStr + ':' + hrStr + ':' + minStr + ':' + secStr ;

         that.setData({timeTex:endtime});
        }
      },1000)
    }

  }
})

 wxml

<text class="_time_num">{{timeTex}}</text>

剩下的就是在别的页面使用了

 需要使用的页面的.json文件

"usingComponents": {
    "这里是在页面中是用组件的自定义标签": "这里是你的组件的路径"
     "timeText": "/modulePage/intervalTime"//这是例子
  },

需要使用的页面的wxml文件

<timeText num="{{timeNum}}">//timeNum是“结束时间 - 开始时间”的毫秒值

这样就大功告成了
PS：转载请标明出处，如有不足欢迎大家指正