カウントダウンタイマーにミリ秒を表示させたい

Question

サイトが表示されてから１５分のカウントダウンタイマーを作成したのですが秒の１つ下のミリ秒を表示させたいです。

こちらのサイトをもとに内容を１５分にして作成しました。
Simple.Timer　

      <div class="timer" data-minutes-left=15></div>

  
  .timer,
    .timer-done,
    .timer-loop {
      font-size: 12vw;
      color: #FFF484;
      font-weight: bold;
      position: relative;
      top: 7vw;
      left: 42vw;
      width: 100%;
    }


    .jst-hours {
      float: left;
    }

    .jst-minutes {
      float: left;
    }

    .jst-seconds {
      float: left;
    }
    .jst-milliseconds {
      float: left;
    }

    .jst-clearDiv {
      clear: both;
    }

    .jst-timeout {
      color: red;
    }

 

     
(function (factory) {
  // Using as a CommonJS module
  if(typeof module === "object" && typeof module.exports === "object") {
    // jQuery must be provided as argument when used
    // as a CommonJS module.
    //
    // For example:
    //   let $ = require("jquery");
    //   require("jquery-simple-timer")($);
    module.exports = function(jq) {
      factory(jq, window, document);
    }
  } else {
    // Using as script tag
    //
    // For example:
    //   <script src="jquery.simple.timer.js"></script>
    factory(jQuery, window, document);
  }
}(function($, window, document, undefined) {

  // Polyfill new JS features for older browser
  Number.isFinite = Number.isFinite || function(value) {
    return typeof value === 'number' && isFinite(value);
  }

  var timer;

  var Timer = function(targetElement){
    this._options = {};
    this.targetElement = targetElement;
    return this;
  };

  Timer.start = function(userOptions, targetElement){
    timer = new Timer(targetElement);
    mergeOptions(timer, userOptions);
    return timer.start(userOptions);
  };

  // Writes to `this._options` object so that other
  // functions can access it without having to
  // pass this object as argument multiple times.
  function mergeOptions(timer, opts) {
    opts = opts || {};

    // Element that will be created for hours, minutes, and seconds.
    timer._options.elementContainer = opts.elementContainer || 'div';

    var classNames = opts.classNames || {};

    timer._options.classNameSeconds       = classNames.seconds  || 'jst-seconds'
      , timer._options.classNameMinutes   = classNames.minutes  || 'jst-minutes'
      , timer._options.classNameHours     = classNames.hours    || 'jst-hours'
      , timer._options.classNameClearDiv  = classNames.clearDiv || 'jst-clearDiv'
      , timer._options.classNameTimeout   = classNames.timeout || 'jst-timeout';
  }

  Timer.prototype.start = function(options) {

    var that = this;

    var createSubElements = function(timerBoxElement){
      var seconds = document.createElement(that._options.elementContainer);
      seconds.className = that._options.classNameSeconds;

      var minutes = document.createElement(that._options.elementContainer);
      minutes.className = that._options.classNameMinutes;

      var hours = document.createElement(that._options.elementContainer);
      hours.className = that._options.classNameHours;

      var clearElement = document.createElement(that._options.elementContainer);
      clearElement.className = that._options.classNameClearDiv;

      return timerBoxElement.
        append(hours).
        append(minutes).
        append(seconds).
        append(clearElement);
    };

    this.targetElement.each(function(_index, timerBox) {
      var that = this;
      var timerBoxElement = $(timerBox);
      var cssClassSnapshot = timerBoxElement.attr('class');

      timerBoxElement.on('complete', function() {
        clearInterval(timerBoxElement.intervalId);
      });

      timerBoxElement.on('complete', function() {
        timerBoxElement.onComplete(timerBoxElement);
      });

      timerBoxElement.on('complete', function(){
        timerBoxElement.addClass(that._options.classNameTimeout);
      });

      timerBoxElement.on('complete', function(){
        if(options && options.loop === true) {
          timer.resetTimer(timerBoxElement, options, cssClassSnapshot);
        }
      });

      timerBoxElement.on('pause', function() {
        clearInterval(timerBoxElement.intervalId);
        timerBoxElement.paused = true;
      });

      timerBoxElement.on('resume', function() {
        timerBoxElement.paused = false;
        const secondsLeft = timerBoxElement.data('timeLeft');
        const onComplete = timerBoxElement.onComplete;
        that.startCountdown(timerBoxElement, { secondsLeft, onComplete });
      });

      createSubElements(timerBoxElement);
      return this.startCountdown(timerBoxElement, options);
    }.bind(this));
  };

  /**
   * Resets timer and add css class 'loop' to indicate the timer is in a loop.
   * $timerBox {jQuery object} - The timer element
   * options {object} - The options for the timer
   * css - The original css of the element
   */
  Timer.prototype.resetTimer = function($timerBox, options, css) {
    var interval = 0;
    if(options.loopInterval) {
      interval = parseInt(options.loopInterval, 10) * 1000;
    }
    setTimeout(function() {
      $timerBox.trigger('reset');
      $timerBox.attr('class', css + ' loop');
      timer.startCountdown($timerBox, options);
    }, interval);
  }

  Timer.prototype.fetchSecondsLeft = function(element){
    var secondsLeft = element.data('seconds-left');
    var minutesLeft = element.data('minutes-left');

    if(Number.isFinite(secondsLeft)){
      return parseInt(secondsLeft, 10);
    } else if(Number.isFinite(minutesLeft)) {
      return parseFloat(minutesLeft) * 60;
    }else {
      throw 'Missing time data';
    }
  };

  Timer.prototype.startCountdown = function(element, options) {
    options = options || {};

    var intervalId = null;
    var defaultComplete = function(){
      clearInterval(intervalId);
      return this.clearTimer(element);
    }.bind(this);

    element.onComplete = options.onComplete || defaultComplete;
    element.allowPause = options.allowPause || false;
    if(element.allowPause){
      element.on('click', function() {
        if(element.paused){
          element.trigger('resume');
        }else{
          element.trigger('pause');
        }
      });
    }

    var secondsLeft = options.secondsLeft || this.fetchSecondsLeft(element);

    var refreshRate = options.refreshRate || 1000;
    var endTime = secondsLeft + this.currentTime();
    var timeLeft = endTime - this.currentTime();

    this.setFinalValue(this.formatTimeLeft(timeLeft), element);

    intervalId = setInterval((function() {
      timeLeft = endTime - this.currentTime();
      // When timer has been idle and only resumed past timeout,
      // then we immediatelly complete the timer.
      if(timeLeft < 0 ){
        timeLeft = 0;
      }
      element.data('timeLeft', timeLeft);
      this.setFinalValue(this.formatTimeLeft(timeLeft), element);
    }.bind(this)), refreshRate);

    element.intervalId = intervalId;
  };

  Timer.prototype.clearTimer = function(element){
    element.find('.jst-seconds').text('00');
    element.find('.jst-minutes').text('00:');
    element.find('.jst-hours').text('00:');
  };

  Timer.prototype.currentTime = function() {
    return Math.round((new Date()).getTime() / 1000);
  };

  Timer.prototype.formatTimeLeft = function(timeLeft) {

    var lpad = function(n, width) {
      width = width || 2;
      n = n + '';

      var padded = null;

      if (n.length >= width) {
        padded = n;
      } else {
        padded = Array(width - n.length + 1).join(0) + n;
      }

      return padded;
    };

    var hours = Math.floor(timeLeft / 3600);
    timeLeft -= hours * 3600;

    var minutes = Math.floor(timeLeft / 60);
    timeLeft -= minutes * 60;

    var seconds = parseInt(timeLeft % 60, 10);

    if (+hours === 0 && +minutes === 0 && +seconds === 0) {
      return [];
    } else {
      return [lpad(hours), lpad(minutes), lpad(seconds)];
    }
  };

  Timer.prototype.setFinalValue = function(finalValues, element) {

    if(finalValues.length === 0){
      this.clearTimer(element);
      element.trigger('complete');
      return false;
    }

    element.find('.' + this._options.classNameSeconds).text(finalValues.pop());
    element.find('.' + this._options.classNameMinutes).text(finalValues.pop() + ':');
    element.find('.' + this._options.classNameHours).text(finalValues.pop() + ':');
  };


  $.fn.startTimer = function(options) {
    this.TimerObject = Timer;
    Timer.start(options, this);
    return this;
  };

}));

この状態だと一番小さい単位だと秒まではわかるんですがその下のミリ秒が表示されず、
millisecond　などのワードを追加しても表示されませんでした。

こちらわかる方いらっしゃいましたら助けて欲しいです。

Comments

[kei344]

提示されたコードの出典（公式URL）を質問文に追記してください。

[bakio]

https://csouza.me/jQuery-Simple-Timer/

こちらになります。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

[bakio]

ご教示いただきありがとうございます。そう致します。

[kei344]

そもそもミリ秒を表示する機能の無いコードですが、出典のコードから何を変更されたのでしょう。

[bakio]

javascriptは変更していません。
変更したのはHTML内の
data-minutes-left=15
の１５という数字とCSSのレイアウト程度です。
こちらのコードではそもそもミリ秒は不可能なんでしょうか。

[kei344]

> こちらのコードではそもそもミリ秒は不可能なんでしょうか。
はい、このコードはミリ秒を表示するようにはできていません。少しの改造程度ではミリ秒を表示することは難しいです。

[bakio]

かしこまりました。別の方法でやってみます

Answer 1

javascriptを以下の指示にしたら成功しました。

  <script type="text/javascript">
    window.addEventListener(
      "load",
      function() {
        var cdown = new Object();
        cdown.elem = document.querySelectorAll(".cdown");
        cdown.tmr = new Array();
        cdown.getTime = function(I) {
          var attributes = cdown.elem[I].attributes;
          for (var type, value, i = 0; i < attributes.length; i++) {
            type = attributes[i].name.match(/(^data-cdown-)(.+)/);
            if (type) {
              value = parseInt(attributes[i].value, 10) || 0;
              return type[2] == "min" ? value * 60 : value;
            }
          }
          return null;
        };
        cdown.start = function(I) {
          var sec = cdown.getTime(I);
          if (sec == null) {
            return;
          }
          var target = new Date().getTime() + sec * 1000;
          cdown.tmr[I] = setInterval(function() {
            var now = new Date().getTime();
            var left = target - now;
            var output = {
              min: Math.floor((left % (1000 * 60 * 60)) / (1000 * 60)),
              sec: Math.floor((left % (1000 * 60)) / 1000),
              ms: left % 1000,
            };
            console.log(left);
            if (left > 0) {
              cdown.elem[I].textContent = "" + ("0" + output.min).slice(-2) + " 分 " + ("0" + output.sec).slice(-2) + " 秒 " + ("00" + output.ms).slice(-2);
            } else {
              cdown.elem[I].textContent = "0:00"; // 終了後に表示される言葉
              window.clearInterval(cdown.tmr[I]);
            }
          }, 20);
        };
        for (var i = 0; i < cdown.elem.length; i++) {
          cdown.start(i);
        }
      },
      false
    );
  </script>

Answer 2

console.log(new Date().getTime()%1000);

Comments

[bakio]

yambe.jpさん
こちらをどこに入れればいいでしょうか？
具体的に教えていただくことは可能でしょうか

試しに今やってますがエラー表示になります...

[yambejp]

逆に質問者参賀どこにどう入れたいのかわからないのでなんとも・・・