Js 实现小程序倒计时和快应用秒表

最近开发中遇到抢购倒计时和秒表的功能,都跟时间相关,功能也差不多。想到以后开发中会经常用到这种小功能,故记录分享一下。

 

小程序里的抢购倒计时:

onLoad: function (options) {

    this.countdown("2020-6-4 18:46:13");  //传入限时的时间

},

 

countdown(time) {

    const that = this;

    var EndTime = new Date(time).getTime() ;

     console.log("qianggou endtime" + EndTime);

    var NowTime = new Date().getTime();

    console.log("qianggou NowTime" + NowTime);

    var total_micro_second = EndTime - NowTime;

    if(total_micro_second < 0) {

      this.data.qghour = 0;

      this.data.qgminute = 0;

      this.data.qgsecond = 0;

      console.log("shouye qianggou finished:" + total_micro_second);

    } else {

      this.dateformat(total_micro_second);

      console.log("shouye qianggou left time:" + total_micro_second);

    }

 

    this.setData({ //刷新页面timestr

      qghour: this.data.qghour,

      qgminute: this.data.qgminute,

      qgsecond: this.data.qgsecond

    });

 

    setTimeout(function() { // 1秒中刷新一次

      total_micro_second -= 1000;

      that.countdown(time);

    }, 1000)

  },

 

  dateformat(micro_second) {

    // 总秒数

    var second = Math.floor(micro_second / 1000);

    // 天数

    this.data.qgday = Math.floor(second / 3600 / 24);

    // 小时

    this.data.qghour = Math.floor(second / 3600 % 24);

    // 分钟

    this.data.qgminute = Math.floor(second / 60 % 60);

    // 

    this.data.qgsecond = Math.floor(second % 60);

 

    if (this.data.qgday < 10) {

        this.data.qgday = '0' + this.data.qgday;

    }

    if (this.data.qghour < 10) {

        this.data.qghour = '0' + this.data.qghour;

    }

    if (this.data.qgminute < 10) {

            this.data.qgminute = '0' + this.data.qgminute;

    }

    if (this.data.qgsecond < 10) {

        this.data.qgsecond = '0' + this.data.qgsecond;

    }

  },

 

快应用里实现的秒表:

 

startTimer() {

    var d = new Date();

    this.time = d.getTime();

    this.seconds = 0;

    this.minutes = 0;

    this.hours = 0;

    this.timer = setInterval(this.showTime.bind(this), 1000);

  },

 

  stopTimer() {

    this.currentTime = '00 : 00 : 00';

    clearInterval(this.timer);

  },

 

  showTime() {

    var d = new Date();

    var ctime = d.getTime();

    this.seconds = Math.trunc(((ctime - this.time)/1000)%60);

    this.minutes = Math.trunc(((ctime - this.time)/1000)/60%60);

    this.hours = Math.trunc(((ctime - this.time)/1000)/3600);

    var timestr = '';

 

    if(this.hours == 0) {

      timestr += '00 : ';

    } else {

      timestr += this.hours +' : ';

    }

 

    if(this.minutes < 10) {

      timestr += '0';

    }

    timestr += this.minutes;

    timestr += ' : ';

    if(this.seconds < 10) {

      timestr += '0';

    }

    timestr += this.seconds;

 

    this.currentTime = timestr;

 

    console.log('showtime:' + this.currentTime);

  },

  

  onReady() {

    this.startTimer();

  },

总结一:

两段代码中分别用到了Math.tranc() Math.foor(),得到结果其实一样的,主要是由于这两段代码中传入的参数都是正数,所以这里取整的话两个都可以用。

总结二:

快应用和小程序差不多,尤其是js部分。但快应用里面的变量是实时刷新的,不用像小程序里一样需要不停调用setData 才能及时刷新。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章