如何显示2位数的剩余时间[倒计时jquery]

How to display 2 digits numbers of time left [countdown jquery]?

本文关键字:时间 倒计时 jquery 余时间 何显示 显示 2位      更新时间:2023-09-26

如何显示2位数的剩余时间[倒计时jquery] ?

我的代码将显示

66days7hours6minutes2seconds

但是我想显示2位数的数字,例如

66days07hours06minutes02seconds

怎么做呢?

http://jsfiddle.net/D3E9G/

您可以添加前导零,然后使用substr将字符串剪切到所需的长度:

day = ("00" + day).substr(-2);            
hour = ("00" + hour).substr(-2);            
minute = ("00" + minute).substr(-2);            
second = ("00" + second).substr(-2);

-2参数表示您想从字符串末尾取2个字符。

工作的例子:

(function($) {
  $.fn.countdown = function(options) {
    // default options
    var defaults = {
      attrName: 'data-diff',
      tmpl: '<span class="hour">%{h}</span><span class="minute">%{m}</span>minutes<span class="second">%{s}</span>seconds',
      end: 'has ended',
      afterEnd: null
    };
    options = $.extend(defaults, options);
    // trim zero
    function trimZero(str) {
      return parseInt(str.replace(/^0/g, ''));
    }
    
    // convert string to time
    function getDiffTime(str) {
      var m;
      if ((m = /^('d{4})[^'d]+('d{1,2})[^'d]+('d{1,2})'s+('d{2})[^'d]+('d{1,2})[^'d]+('d{1,2})$/.exec(str))) {
        var year = trimZero(m[1]),
          month = trimZero(m[2]) - 1,
          day = trimZero(m[3]),
          hour = trimZero(m[4]),
          minute = trimZero(m[5]),
          second = trimZero(m[6]);
        return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
      }
      return parseInt(str);
    }
    
    // format time
    function format(diff) {
      var tmpl = options.tmpl,
        day, hour, minute, second;
      day = /%'{d'}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
      hour = Math.floor((diff - day * 86400) / 3600);
      minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
      second = diff - day * 86400 - hour * 3600 - minute * 60;
      day = ("00" + day).substr(-2);
      hour = ("00" + hour).substr(-2);
      minute = ("00" + minute).substr(-2);
      second = ("00" + second).substr(-2);
      tmpl = tmpl.replace(/%'{d'}/ig, day)
        .replace(/%'{h'}/ig, hour)
        .replace(/%'{m'}/ig, minute)
        .replace(/%'{s'}/ig, second);
      return tmpl;
    }
    
    // main
    return this.each(function() {
      var el = this,
        diff = getDiffTime($(el).attr(options.attrName));
      function update() {
        if (diff <= 0) {
          if (options.afterEnd) {
            options.afterEnd();
          }
          return;
        }
        $(el).html(format(diff));
        setTimeout(function() {
          diff--;
          update();
        }, 1000);
      }
      update();
    });
  };
})(jQuery);
$(function() {
  $('.J_countdown2').countdown({
    tmpl: '<span>%{d}</span>days<span>%{h}</span>hours<span>%{m}</span>minutes<span>%{s}</span>seconds'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="J_countdown2" data-diff="5766998"></div>

试试这个

if (day < 10) day = "0" + day;
if (hour < 10) hour = "0" + hour;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;
演示