[英]How can i add timezone in my code for countdown timer
嗨,請幫助我如何添加時區取決於我的電腦或手機的當前時間。 該代碼用於我的目標網頁。 謝謝
這是我的代碼。
//創建倒計時
var Countdown = {
//骨干結構$ el:$('。countdown'),
//參數countdown_interval:null,total_seconds:0,
//初始化倒計時
初始化: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();
},
計數:function(){
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);
},
animateFigure:function($ el,value){
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();
將moment.js與moment-timezone附加在( link )上,可支持時區猜測
moment.tz.guess().
如果可以保證用戶運行的瀏覽器支持全新的ECMAScript Internationalization API,則可以獲取用戶的時區,如下所示:
Intl.DateTimeFormat().resolvedOptions().timeZone
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.