在全球范围内按时间同时显示/隐藏广告

Question

这个想法是这样的：在阿根廷早上6：00，我希望显示一个保持活动状态一小时的公告（图像），也就是说，它可以是可见的，当它达到60分钟时，它是隐藏的，也就是说，在早上7：00隐藏。此操作每 7 小时重复一次。因此，我希望它保持隐藏7小时，然后再次重复该操作。在下午2：00，它出现，在下午3：00它隐藏。7小时过去了。它在晚上10点再次出现，在晚上11点隐藏，7个小时过去了，他在早上6点再次出现。

我创建了此代码，以便它可以识别时差并在所有国家/地区同时运行，也就是说，广告在阿根廷上午6：00发布，同时在洛杉矶展示，即使它是凌晨2：00。但它不起作用。它出现在当时根据国家。

注意：代码中有两个元素，一个用于在 0：00 显示的另一个广告

var offset = new Date().getTimezoneOffset() / 60;

var horarios1 = [6 + offset, 14 + offset, 22 + offset];

var elemento1 = document.getElementById("panel1");

var horarios2 = [0 + offset];

var elemento2 = document.getElementById("panel2");

setInterval(function() {

 var hora = new Date().getHours();

 if (horarios1.includes((hora + offset) % 24)) {

   elemento1.style.display = 'block';

 } else {

   elemento1.style.display = 'none';

 }

 if (horarios2.includes((hora + offset) % 24)) {

   elemento2.style.display = 'block';

 } else {

   elemento2.style.display = 'none';

 }

}, 1000);

<div id="panel1" style="display: none;">PANEL 6, 14, 22</div>

<div id="panel2" style="display: none;">PANEL 0</div>

Answer 1

您的代码正在使用脚本时间。Java脚本从用户机器上获取时间。因此，当您访问您的网站时，它将显示您机器的时间，当我访问时，它将显示我的机器的时间。但是，如果您希望全世界的通用时间，即在世界各地显示广告阿根廷时间06：00，那么您可以应用以下任一方法。1. 使用服务器时间您需要在此处编写一些后端代码。显示来自服务器的时间，以及整个世界的固定时间。细节取决于您使用的后端技术（php / java / python）。2. 使用第三方接口使用来自其他网站的 API。就像 worldtimeapi.org/ 一样。拨打ajax电话，获取所需位置的时间。您可以使用普通的 java 脚本或使用任何 ajax 库来执行此操作。在这里，我包括两种方法：1）普通的javascript和2）使用axios（一个流行的ajax库）香草function getTime(url) {&nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; &nbsp; const req = new XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; req.open("GET", url);&nbsp; &nbsp; &nbsp; &nbsp; req.onload = () =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.status === 200&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? resolve(req.response)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : reject(Error(req.statusText));&nbsp; &nbsp; &nbsp; &nbsp; req.onerror = (e) => reject(Error(`Network Error: ${e}`));&nbsp; &nbsp; &nbsp; &nbsp; req.send();&nbsp; &nbsp; });}现在使用此函数进行 ajax 调用let url = "http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires";getTime(url)&nbsp; &nbsp; .then((response) => { //the api will send this response which is a JSON&nbsp; &nbsp; &nbsp; &nbsp; // you must parse the JSON to get an object using JSON.parse() method&nbsp; &nbsp; &nbsp; &nbsp; let dateObj = JSON.parse(response);&nbsp; &nbsp; &nbsp; &nbsp; let dateTime = dateObj.datetime;&nbsp; &nbsp; &nbsp; &nbsp; console.log(dateObj);&nbsp; &nbsp; &nbsp; &nbsp; console.log(dateTime);&nbsp; &nbsp; })&nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; });断续器将公理库添加到项目中。axios({&nbsp; &nbsp; url:"http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",&nbsp; &nbsp; method: "get",})&nbsp; &nbsp; // Here response is an object. The api will send you a JSON. But axios automatically&nbsp; &nbsp; // convert it to an object. So you don't need to convert it manually.&nbsp; &nbsp; .then((response) => {&nbsp; &nbsp; &nbsp; &nbsp; let dateObj = response.data;&nbsp; &nbsp; &nbsp; &nbsp; let dateTime = dateObj.datetime;&nbsp; &nbsp; &nbsp; &nbsp; console.log(dateObj);&nbsp; &nbsp; &nbsp; &nbsp; console.log(dateTime);&nbsp; &nbsp; })&nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; });(function () {&nbsp; &nbsp; var url =&nbsp; &nbsp; &nbsp; &nbsp; "http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",&nbsp; &nbsp; &nbsp; &nbsp; horarios1 = [6, 14, 22],&nbsp; &nbsp; &nbsp; &nbsp; elemento1 = document.getElementById("panel1"),&nbsp; &nbsp; &nbsp; &nbsp; horarios2 = [0],&nbsp; &nbsp; &nbsp; &nbsp; elemento2 = document.getElementById("panel2");&nbsp; &nbsp; function getTime(url) {&nbsp; &nbsp; &nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const req = new XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.open("GET", url);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.onload = () =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.status === 200&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? resolve(req.response)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : reject(Error(req.statusText));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.onerror = (e) => reject(Error(`Network Error: ${e}`));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req.send();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; getTime(url)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((data) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dateObj = JSON.parse(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dateTime = dateObj.datetime;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var hora = Number(dateTime.slice(11, 13));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (horarios1.includes(hora)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemento1.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemento1.style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (horarios2.includes(hora)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemento2.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemento2.style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }, 1000);})();&nbsp; &nbsp; &nbsp;<div id="panel1" style="display: none;">PANEL 6, 14, 22</div>&nbsp; &nbsp; &nbsp;<div id="panel2" style="display: none;">PANEL 0</div>希望有所帮助。不过，要记住的事情很少 -1.&nbsp;worldtimeapi.org/&nbsp;是第三方服务。如果他们选择终止服务，您的代码将中断。但是，如果您使用服务器时间，只要您的服务器正在运行，您的代码就会运行。2.&nbsp;由于 ajax 调用，此代码无法在堆栈溢出中工作。将代码复制粘贴到项目中以使其正常工作。3.如果仍然不起作用，则表示您面临CORS（跨域策略）问题。阅读此链接，搜索互联网/ SO。您将找到您的解决方案。快乐的编码:)