js 写插件入门(倒计时插件)

阅读 (210)
原生JS写插件,本例重点在于new Date的应用以及定时器setInterval函数

H5活动页中经常会要写一些活动的倒计时。

能实现倒计时功能的jquery插件有很多,本例有点重复造轮子,主要的意义在于不依赖别人写的东西,自己去实现倒计时这个功能,先从简单的开始,逐步写一些结合更多JS知识点的插件。

样例地址:https://returnc.com/demo/timedown.html

;(function(undefined) {
      "use strict"
      var _global

      // 合并对象(深拷贝)
      function extend(defaults, newData) {
        var newData = newData || {};
        for (var x in defaults) {
          // 对于使用时,没有设置的参数;用默认参数代替
          if (typeof newData[x] === 'undefined') {
            newData[x] = defaults[x];
          }
        }
        return newData
      }

      // 时间补零
      function prefixInteger (num, n) {
        return (Array(n).join(0) + num).slice(-n)
      }

      // 插件函数
      function Timedown(opt){
         // 未使用new关键词时
        if (!(this instanceof Timedown)){
          // 等于再new一个Timedown
          return new Timedown(opt)
        }
        this._initial(opt);
      }

      Timedown.prototype = {
        constructor: this,

        _initial: function (opt) {
          var defaults = {
            id: 'timedown',
            endTime: new Date().getTime(),
            finishedDesc: '倒计时已结束'
          }

          // 没有设置的参数,使用默认值
          this.opt = extend(defaults, opt) // 得到的this.opt, 在方法中调用;
          var _this = this
          var setTime = setInterval(function () {
            // 结束时间的时间戳
            var endTimestamp = new Date(this.opt.endTime).getTime()

            // 当前时间的时间戳
            var startTimestamp = new Date().getTime()

            // 计算时间差,除1000是因为毫秒的精度换成秒
            var timeDiff = parseInt((endTimestamp - startTimestamp) / 1000)

            // 计算倒计时小时
            var hoursLeft = parseInt(timeDiff / 60 / 60)
            // 计算倒计时分
            var minutesLeft = parseInt((timeDiff / 60) % 60)
            // 计算倒计时秒
            var secondsLeft = parseInt(timeDiff % 60)

            // 获取待设置html的元素
            var el = document.getElementById(_this.opt.id)

            // 倒计时结束时清除计时器执行其它逻辑
            if(timeDiff <= 0) {
              clearInterval(setTime)
              el.innerHTML = _this.opt.finishedDesc
            } else {
              el.innerHTML = prefixInteger(parseInt(hoursLeft), 2) + ':' + prefixInteger(parseInt(minutesLeft), 2) + ':' + prefixInteger(parseInt(secondsLeft), 2)
            }
          }, 1000)
        }
      }

     // 最后将插件对象暴露给全局对象
      _global = (function(){ return this || (0, eval)('this'); }());
      if (typeof module !== "undefined" && module.exports) {
          module.exports = Timedown;
      } else if (typeof define === "function" && define.amd) {
          define(function(){return Timedown;});
      } else {
          !('Timedown' in _global) && (_global.Timedown = Timedown);
      }
}());   

调用:

var opt = {
      id: 'timedown',
      endTime: '2020/07/15 18:00:00'
}
Timedown(opt);

 

更新于:2020-07-21 11:10:25
返回顶部