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

Question

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

我创建了这个代码，以便它识别时差并在所有国家/地区同时运行，也就是说，广告在阿根廷 6:00 am 出现并同时显示在洛杉矶，尽管现在是 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

您的代码正在使用 javascript 时间。 Javascript 从用户机器上获取时间。所以当你访问你的网站时，它会显示你机器的时间，当我访问它时它会显示我机器的时间。但是，如果您想要全世界的通用时间，即在全世界显示广告阿根廷时间 06:00，那么您可以应用以下任一方法。

1.使用服务器时间

这里您需要一些后端代码。显示来自您的服务器的时间，它是全世界固定的。详细信息取决于您使用的后端技术 (php/java/python)。

2。使用第三方 API

使用来自其他网站的 api。喜欢 worldtimeapi.org/. Make an ajax call, get the time of your desired location. You can use plain javascript or use any ajax library to do that. Here I'm including two methods: 1) plain javascript and 2) using axios（一个流行的 ajax 库）

原版 JS

function getTime(url) {
    return new Promise((resolve, reject) => {
        const req = new XMLHttpRequest();
        req.open("GET", url);
        req.onload = () =>
            req.status === 200
                ? resolve(req.response)
                : reject(Error(req.statusText));
        req.onerror = (e) => reject(Error(`Network Error: ${e}`));
        req.send();
    });
}

现在使用此函数进行 ajax 调用

let url = "http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires";

getTime(url)
    .then((response) => { //the api will send this response which is a JSON
        // you must parse the JSON to get an object using JSON.parse() method
        let dateObj = JSON.parse(response);
        let dateTime = dateObj.datetime;
        console.log(dateObj);
        console.log(dateTime);
    })
    .catch((err) => {
        console.log(err);
    });

AXIOS

将 axios 库添加到您的项目中。

axios({
    url:"http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",
    method: "get",
})
    // Here response is an object. The api will send you a JSON. But axios automatically
    // convert it to an object. So you don't need to convert it manually.
    .then((response) => {
        let dateObj = response.data;
        let dateTime = dateObj.datetime;
        console.log(dateObj);
        console.log(dateTime);
    })
    .catch((err) => {
        console.log(err);
    });

(function () {
 var url =
  "http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",
  horarios1 = [6, 14, 22],
  elemento1 = document.getElementById("panel1"),
  horarios2 = [0],
  elemento2 = document.getElementById("panel2");

 function getTime(url) {
  return new Promise((resolve, reject) => {
   const req = new XMLHttpRequest();
   req.open("GET", url);
   req.onload = () =>
    req.status === 200
     ? resolve(req.response)
     : reject(Error(req.statusText));
   req.onerror = (e) => reject(Error(`Network Error: ${e}`));
   req.send();
  });
 }

 setInterval(function () {
  getTime(url)
   .then((data) => {
    var dateObj = JSON.parse(data);
    var dateTime = dateObj.datetime;
    var hora = Number(dateTime.slice(11, 13));

    if (horarios1.includes(hora)) {
     elemento1.style.display = "block";
    } else {
     elemento1.style.display = "none";
    }
    if (horarios2.includes(hora)) {
     elemento2.style.display = "block";
    } else {
     elemento2.style.display = "none";
    }
   })
   .catch((err) => {
    console.log(err);
   });
 }, 1000);
})();

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

希望对您有所帮助。不过有几件事要记住 -

1. worldtimeapi.org/是第三方服务。如果他们选择终止服务，您的代码就会中断。但是如果你用你的服务器时间，只要你的服务器是运行ning，你的代码就会运行.

2. 由于 ajax 调用，此代码将无法在 Whosebug 中运行。将代码复制粘贴到您的项目中以使其工作。

3. 如果还是不行，说明你遇到了CORS（cross origin policy）问题。 Read this link，搜索 internet/SO。你会找到你的解决方案。编码愉快:)

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

Show / Hide ad by time at the same time worldwide

javascript

html

css

blogger