計時器插件以及組件示例

vue組件 

<template>
  <div>
    <span>{{msg}}</span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  props: {
    times: Number
  },
  created () {
    let _this = this
    let restTime = this.times
    /* eslint-disable */
    function time () {
      if (restTime === 0) {
        return
      }
      var startdays = Math.floor(restTime/3600/24)
      var starthours = Math.floor(restTime%86400/3600)
      var startMinutes = Math.floor(restTime%86400%3600/60)
      var startSec = Math.floor(restTime%86400%3600%60%60)
      if(startdays>0){
        _this.msg = startdays+'天'+starthours+'時'+startMinutes + '分鐘'+startSec+'秒'
      } else {
        _this.msg = starthours+'時'+startMinutes + '分鐘'+startSec+'秒'
      }

      restTime = restTime - 1
      var t=window.setTimeout(function () {
        time()
      }, 1000)
    }
    time()
    /* eslint-disable */
  }
}
</script>

jq插件：

; (function ($, window, document, undefined) {
    'use strict';
    function timer(element, options) {
        this.element = element;
        this.options = {
            secondsNum: options.secondsNum || 1, //總秒數
            callback: options.callback // 回調函數
        };
        this.init();
    }
    timer.prototype = {
        constructor: timer,
        init: function () {
            this.createHtml();
        },
        createHtml: function () {
            var me = this;
            var secondsNum = me.options.secondsNum;
            function time() {

                var starthours = Math.floor(secondsNum % 86400 / 3600)
                var startMinutes = Math.floor(secondsNum % 86400 % 3600 / 60)
                var startSec = Math.floor(secondsNum % 86400 % 3600 % 60 % 60)
                startSec=startSec<10?'0'+startSec:startSec
                startMinutes=startMinutes<10?'0'+startMinutes:startMinutes
                var content = starthours + ':' + startMinutes + ':' + startSec

                me.element.html(content);
                if (secondsNum === 0) {
                    if (me.options.callback) {
                        me.options.callback(me.options.pageNum);
                    }
                    clearInterval(t)
                    return
                }
                secondsNum = secondsNum - 1
                var t = window.setTimeout(function () {
                    time()
                }, 1000)
            }
            time()

        }
    };
    $.fn.timer = function (options) {
        return new timer($(this), options);
    }
})(jQuery, window, document);

jq插件使用方式

//使用格式

$(".timer1").timer({
secondsNum: $(".timer1").data("num")
})