美文网首页让前端飞Web前端之路Web 前端开发
Timer 类 — ES6 模块化开发 倒计时插件(支持小程序)

Timer 类 — ES6 模块化开发 倒计时插件(支持小程序)

作者: 2o壹9 | 来源:发表于2019-11-07 10:23 被阅读0次

源码:

/**

  • Timer 类
    /
    export class Timer {
    /
    *

    • 空的参数

    • @private
      */
      constructor() {

      /**

      • 把util函数的setTimeout次数赋值给this.settime
      • @private
        */
        this.settime = null;
        }

    /**

    • Timer 初始化方法
    • @param {Object} args - 前台Object参数.
      */
      init(args) {
      var that = this;
      swan.request({
      url: 'https://www.xxx.com', //请求时间接口,返回格式:{"result":"ok","time":"2019/11/7 10:04:14"}
      method: 'GET',
      dataType: 'json',
      data: {
      key: new Date().getTime()
      },
      header: {
      'content-type': 'application/json' // 默认值
      },
      success: function (res) {
      if (res.data.result === "ok") {
      if (typeof (args) == "object") {
      that.render(args, res.data.time);
      } else {
      console.log("使用格式错误!");
      }
      }
      },
      fail: function (err) {
      console.log('错误码:' + err.errCode);
      console.log('错误信息:' + err.errMsg);
      }
      });
      }

    /**

    • Timer 内部功能方法
    • @param {Object} args - 前台Object参数.
    • @param {String} time - 从后台接口获取到的当前服务器时间.
    • @private
      */
      render(args, time) {
      var that = this,
      endtime = args.endtime,
      nowtime, diff;
      nowtime = new Date(time).getTime(),
      diff = (new Date().getTime() - nowtime);
      that.util(endtime, nowtime, diff, args);
      }

    /**

    • Timer 内部功能方法
    • @param {String} endtime - 结束时间.
    • @param {Number} nowtime - 服务器当前时间.
    • @param {Number} diff - 客户端和服务器端的时间差.
    • @param {Object} args - 前台Object参数.
    • @private
      */
      util(endtime, nowtime, diff, args) {
      var d, h, m, s, ms, flag,
      self = this,
      timeGetTime = new Date(endtime).getTime(), //到期时间 毫秒数
      nows = new Date().getTime(),
      lefttime = parseInt((timeGetTime - nows + diff) / 1000);
      d = parseInt(lefttime / 3600 / 24);
      h = parseInt((lefttime / 3600) % 24);
      m = parseInt((lefttime / 60) % 60);
      s = parseInt(lefttime % 60);
      ms = new Date().getMilliseconds();
      s < 0 || s == 0 && m < 0 ? flag = true : flag = false;
      self.settime = setTimeout(arguments.callee.bind(self, endtime, nowtime, diff, args), 50);
      if (flag == true) {
      clearTimeout(self.settime);
      args.over.call(self, self.formatDate(nowtime));
      } else {
      args.show.call(self, d, h, m, s, ms, self.formatDate(nowtime));
      }
      }

    /**

    • Timer 内部格式化日期函数
    • @param {number} now - 服务器时间戳.
    • @private
      */
      formatDate(now) {
      var year = new Date(now).getFullYear(),
      month = new Date(now).getMonth() + 1,
      date = new Date(now).getDate(),
      hour = new Date(now).getHours(),
      minute = new Date(now).getMinutes(),
      second = new Date(now).getSeconds();
      return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
      }

}

/* 小程序使用方法 */
// import { Timer } from '../../../lib/js/Timer.js'; //引入Timer类
// //倒计时时间
// var timer = new Timer();
// timer.init({
// "endtime": "2020/09/26 14:05:00",
// "show": function (d, h, m, s, ms, nowtime) {//时间没到前显示的内容
// console.log(d, h, m, s, ms, nowtime);
// },
// "over": function (nowtime) {//时间到了以后显示的内容
// console.log("过期",nowtime);
// }
// });

相关文章

网友评论

    本文标题:Timer 类 — ES6 模块化开发 倒计时插件(支持小程序)

    本文链接:https://www.haomeiwen.com/subject/knpmbctx.html