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

pw136qt2  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(145)

如何显示2位数的剩余时间[countdown jquery]?
我的代码会显示

66days7hours6minutes2seconds

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

66days07hours06minutes02seconds

怎么做?
http://jsfiddle.net/D3E9G/

mitkmikd

mitkmikd1#

你可以在字符串的前面加上一个零,然后使用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>
5cnsuln7

5cnsuln72#

试试这个

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

DEMO

相关问题