根据远程时区和日期显示div [英] Display div based on remote timezone and dates

问题描述

我正在尝试显示一个聊天div，显示在星期一到星期五上午8点到下午6点之间在线，或者根据东部时区（NYC）显示离线显示，以便北京的客户看到基于这些时间在线或离线。

I'm trying to display a chat div that displays between the hours of 8am-6pm Monday to Friday "Online" or show nothing if offline, based on the Eastern Time Zone (NYC), so that customers from Beijing will see Online or Offline based on these hours.

只需要显示（）或隐藏（）div。到目前为止，我有时间，但我不知道如何让它们与用户时区相关。

Simply need to show() or hide() the div. So far I have the hours, but I'm not sure how to get them to be in relation to the user time-zone.

$(document).ready(function () {

var start = new Date();
var end = new Date();
var time = new Date().getTime();

if (time > start.setHours(8,00) && time < end.setHours(18,00)) {
    $('.online').show();
}
else {
    $('.offline').hide();
    }
});

推荐答案

原来这不是一个完全无关紧要的任务JavaScript（如 @StephenR 的答案中所述，这可能更容易处理服务器端）。正如一些评论中所指出的，使用库可能是更好的js方法。

Turns out that this is not a completely trivial task using JavaScript (as noted in the answer from @StephenR, this may be easier to deal with server side). And as noted in some of the comments, using a library may be the better js approach.

这就是说，在考虑了一下 @RobG 关于对 timeLone 等选项的不同浏览器支持，在 toLocaleString 中，我很好奇解决这个问题需要什么方式（让我感谢各种js日期库）。下面的代码段...

That said, after thinking a bit about the comments from @RobG regarding varying browser support for options like timeZone in toLocaleString, I was curious what it would take to solve this another way (makes me grateful for the various js date libraries). Snippet below...

let d = new Date(); // current datetime
let month = d.getUTCMonth(); // utc month (jan is 0)
let date = d.getUTCDate(); // utc date
let hour = d.getUTCHours(); // utc hours (midnight is 0)
let day = d.getUTCDay(); // utc weekday (sunday is 0)
let offset = 4; // assume EDT to start
let adjust = 1; // offset adjustment at DST
let mar = (month === 2); // march boolean
let nov = (month === 10); // november boolean

// handle march and november (DST change months)
if (mar || nov) {
  if (mar) {
    offset = 5; // assume EST to start
    adjust = -1; // DST adjustment to EDT
  }
  // handle offset shift to prior day
  if (hour - offset < 0) {
    date -= 1;
    day -= 1;
  }
  // handle date ranges when DST change may or may not have occurred yet 
  if ((mar && date > 7 && date < 15) || (nov && date < 8)) {
    // DST adjustment on or after DST sunday at 2:00am
    if (date >= date - day && hour - offset >= 2) {
      offset += adjust;
    }
  // DST adjustment for dates after DST change has already occured  
  } else if ((mar && date > 14) || (nov && date > 7)) {
    offset += adjust;
    // handle EDT to EST offset shift to prior day (not already handled above)
    if (nov && hour === 4) {
      date -= 1;
      day -= 1;
    }
  }
// handle months without DST changes
} else {
  // EDT to EST adjustment for EST months
  if (month < 2 || month > 10) {
    offset += adjust;
  }
  // handle offset shift to prior day
  if (hour < offset) {
    day -= 1;
  }
}

// get current timezone hour
if (hour >= offset) {
  hour -= offset;
} else {
  hour = hour - offset + 24;
}

// do something on weekdays between 8am and 6pm
if (day > 0 && day < 6 && hour > 7 && hour < 19) {
  console.log('online'); // handle online
// do something else on nights and weekends
} else {
  console.log('offline'); // handle offline
}

这篇关于根据远程时区和日期显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！