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

Show / Hide ad by time at the same time worldwide

想法是这样的:在阿根廷 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>

提前致谢。

您的代码正在使用 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。你会找到你的解决方案。编码愉快:)