javascript - 不同时区的倒计时器

Question

我需要为公司办公室开发一个倒计时器时间:

一个办事处位于巴西，另一个办事处位于日本

巴西 = UTC-03:00日本 = UTC+09:00

两个办事处均于上午 8 点开门，晚上 8 点关门，巴西办事处开门时，日本办事处关门。

我如何配置为日本人看到巴西办事处关闭而日本办事处打开，反之亦然

点击链接:http://lickslegal.webflow.io/teste/relogio

我的 JavaScript 代码:

function getTimeRemaining(endtime){

  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}


function initializeClock(endtime, clock_location, status, add_class, remove_class){

  clock_location.find('.relogio_status').removeClass(remove_class);
  clock_location.find('.relogio_status').addClass(add_class);

  var timeinterval = setInterval(function(){
    var t = getTimeRemaining(endtime);

    var show_message = ' '+status+' in ';

    if (t.days > 0) {
        show_message += t.days+" d ";
    }

    show_message += (t.hours < 10 ? '0':'')+t.hours+":"+(t.minutes < 10 ? '0':'')+t.minutes+":"+(t.seconds < 10 ? '0':'')+t.seconds;

    clock_location.find('.status_clock_text').html(show_message);

    if(t.total==0){
      // clearInterval(timeinterval);
      // location.reload();
      clock_city('rio_de_janeiro');
    }
  },1000);
}


function when_monday(){
    var will_monday = new Date();
    will_monday.setDate(will_monday.getDate() + (1 + 7 - will_monday.getDay()) % 7);

    return {
        'year': will_monday.getFullYear(),
        'month': (will_monday.getMonth() +1),
        'date': will_monday.getDate(),
        'full': will_monday,
        'open_or_close': will_monday.getFullYear()+"-"+(will_monday.getMonth() +1)+"-"+will_monday.getDate()
    };
}

function go_tomorrow(){
    var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);

    return {
        'year': tomorrow.getFullYear(),
        'month': (tomorrow.getMonth() +1),
        'date': tomorrow.getDate(),
        'full': tomorrow,
        'open_or_close': tomorrow.getFullYear()+"-"+(tomorrow.getMonth() +1)+"-"+tomorrow.getDate()
    };
}


function clock_city(city_id){
    var today = new Date();

    var y = today.getFullYear();
    var m = (today.getMonth() +1);
    var d = today.getDate();

    var location_city = $("#"+city_id);

    var city_open_time = location_city.find('.open_time').text();
    var city_close_time = location_city.find('.close_time').text();
    var city_close_date = location_city.find('.close_date').text();

    // var city_open_deadline = y+"-"+m+"-"+d+" "+city_open_time;
    var city_close_deadline = y+"-"+m+"-"+d+" "+city_close_time;



    var hora_atual = (today.getHours() < 10 ? '0':'')+today.getHours()+':'+today.getMinutes();

    if (hora_atual >= city_open_time && hora_atual < city_close_time){
        //ABERTO
        console.log('aberto');
        initializeClock(city_close_deadline, location_city, 'closing', 'office_open', 'office_closed');
    }else{
        //FECHADO
        console.log('fechado');

        //Verifica se for SEXTA ou FDS
        if ( (today.getDay() +1) == 6 || today.getDay() == 6 || today.getDay() == 0) {  
            var city_open_deadline = when_monday().open_or_close+" "+city_open_time;
        }else{
            var city_open_deadline = go_tomorrow().open_or_close+" "+city_open_time;
        }
        initializeClock(city_open_deadline, location_city, 'opening', 'office_closed', 'office_open');
    }
}


$(document).ready(function() {
    clock_city('rio_de_janeiro');
    clock_city('tokyo');
});

Answer 1

部分问题是您的网站显示巴西办公时间为 08:00 至 20:00，日本办公时间为 08:00 至 20:00。这些范围都不正确。巴西办公时间为 11:00 至 23:00，日本办公时间为 23:00 至 11:00。作为一般规则，除了最终显示之外，所有地方都使用 UTC。

new Date() 生成一个 Date 对象，保存当前日期(UTC 格式)。由于您的引用时间也是 UTC 时间，因此无需转换即可找到剩余时间。由于您实际上并不关心日期，只关心持续时间，因此不需要对输出进行任何时区调整。