簡體   English   中英

如何在我的代碼中為倒數計時器添加時區

[英]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

參考: 對ECMAScript國際化API的支持

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM