如何在倒数计时器的代码中添加时区



嗨,请帮忙,如何添加时区取决于我的PC或手机的当前时间。 此代码适用于我的登录页面。谢谢

这是我的代码。

创建倒计时

var 倒计时 = {

骨干状结构 $el: $('.倒计时'(,

参数 countdown_interval:空, total_seconds : 0,

初始化倒计时

init: function(( {

// DOM
this.$ = {
days  : this.$el.find('.bloc-time.days .figure'),
hours  : this.$el.find('.bloc-time.hours .figure'),
minutes: this.$el.find('.bloc-time.min .figure'),
seconds: this.$el.find('.bloc-time.sec .figure')
};
// Init countdown values
this.values = {
days  : this.$.days.parent().attr('data-init-value'),
hours  : this.$.hours.parent().attr('data-init-value'),
minutes: this.$.minutes.parent().attr('data-init-value'),
seconds: this.$.seconds.parent().attr('data-init-value'),
};
// Initialize total seconds
this.total_seconds = this.values.days * 60 * 60 * 60 + (this.values.hours * 60 * 60) + (this.values.minutes * 60) + this.values.seconds;
// Animate countdown to the end
this.count();

},

计数: 函数(( {

var that    = this,
$day_1 = this.$.days.eq(0),
$day_2 = this.$.days.eq(1),
$hour_1 = this.$.hours.eq(0),
$hour_2 = this.$.hours.eq(1),
$min_1  = this.$.minutes.eq(0),
$min_2  = this.$.minutes.eq(1),
$sec_1  = this.$.seconds.eq(0),
$sec_2  = this.$.seconds.eq(1);
this.countdown_interval = setInterval(function() {
if(that.total_seconds > 0) {
--that.values.seconds;
if(that.values.minutes >= 0 && that.values.seconds < 0) {
that.values.seconds = 59;
--that.values.minutes;
}
if(that.values.hours >= 0 && that.values.minutes < 0) {
that.values.minutes = 59;
--that.values.hours;
}
if(that.values.days >= 0 && that.values.hours < 0) {
that.values.hours = 24;
--that.values.days;
}
// Update DOM values
// Days
that.checkHour(that.values.days, $day_1, $day_2);
// Hours
that.checkHour(that.values.hours, $hour_1, $hour_2);
// Minutes
that.checkHour(that.values.minutes, $min_1, $min_2);
// Seconds
that.checkHour(that.values.seconds, $sec_1, $sec_2);
--that.total_seconds;
}
else {

clearInterval(that.countdown_interval);
document.getElementsByClassName('countdown')[0].style.visibility = 'hidden';
document.getElementsByClassName("countdown-ex")[0].innerHTML = "EXPIRED!";

}
}, 1000);

},

动画图:函数($el,值({

var that         = this,
$top         = $el.find('.top'),
$bottom      = $el.find('.bottom'),
$back_top    = $el.find('.top-back'),
$back_bottom = $el.find('.bottom-back');
// Before we begin, change the back value
$back_top.find('span').html(value);
// Also change the back bottom value
$back_bottom.find('span').html(value);
// Then animate
TweenMax.to($top, 0.8, {
rotationX           : '-180deg',
transformPerspective: 300,
ease                : Quart.easeOut,
onComplete          : function() {
$top.html(value);
$bottom.html(value);
TweenMax.set($top, { rotationX: 0 });
}
});
TweenMax.to($back_top, 0.8, {
rotationX           : 0,
transformPerspective: 300,
ease                : Quart.easeOut,
clearProps          : 'all'
});

},

checkHour: function(value, $el_1, $el_2( {

var val_1       = value.toString().charAt(0),
val_2       = value.toString().charAt(1),
fig_1_value = $el_1.find('.top').html(),
fig_2_value = $el_2.find('.top').html();
if(value >= 10) {
// Animate only if the figure has changed
if(fig_1_value !== val_1) this.animateFigure($el_1, val_1);
if(fig_2_value !== val_2) this.animateFigure($el_2, val_2);
}
else {
// If we are under 10, replace first figure with 0
if(fig_1_value !== '0') this.animateFigure($el_1, 0);
if(fig_2_value !== val_1) this.animateFigure($el_2, val_1);
}

} };

//我们走吧!

Countdown.init((;

使用时刻.js与时刻时区附加(链接(,支持时区猜测

moment.tz.guess().

如果你能保证你的用户运行的浏览器支持全新的 ECMAScript 国际化 API,你可以像这样获取用户的时区:

Intl.DateTimeFormat().resolvedOptions().timeZone

参考:支持 ECMAScript 国际化 API