如何显示2位数的剩余时间[倒计时jquery]
How to display 2 digits numbers of time left [countdown jquery]?
如何显示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;
演示相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 在特定时间倒计时重置
- 如何制作倒计时计时器并在时间到时更新MySQL记录
- 在javascript中使用PHP时间字符串后,倒计时不起作用
- 钛合金未来的日子和时间倒计时
- 如何从服务器倒计时并在一段时间后触发事件
- 时间倒计时(角度2)
- 如何创建在特定时间重置的倒计时
- 倒计时计时器在Chrome和Firefox上显示不同的剩余时间
- 来自服务器的 GMT 时间倒计时计数
- 设置时间倒计时计时器jquery
- 日期时间倒计时,删除小数,并在每个类别中保留时间显示时间
- Javascript开放时间倒计时
- 如何在JS/PHP的Microtime中从服务器时间倒计时到最接近的半小时
- 使用angular js进行时间倒计时
- Jquery/Ajax/JavaScript时间倒计时不停
- 如何显示2位数的剩余时间[倒计时jquery]