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

Question

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

我创建了此代码，以便它可以识别时差并在所有国家/地区同时投放，也就是说，广告在阿根廷的上午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

您的代码正在使用JavaScript时间。 Javascript从用户机器上花费时间。因此，当您访问网站时，它将显示您的机器的时间，当我访问网站时，它将显示我的机器的时间。但是，如果您希望在世界范围内使用通用时间，即在全世界的06:00显示阿根廷时间广告，则可以采用以下两种方法之一。

1。使用服务器时间

您需要一点后端代码。显示服务器上的时间，以及整个世界的时间。详细信息取决于您使用的后端技术（php / java / python）。

2。使用第三方API

使用其他网站的api。像worldtimeapi.org/。进行ajax调用，获取所需位置的时间。您可以使用普通的javascript或使用任何ajax库来执行此操作。在这里，我包括两种方法：1）简单的javascript和2）使用axios（流行的Ajax库）

Vanilla 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/是第三方服务。如果他们选择终止服务，则您的代码将中断。但是，如果您使用服务器时间，则只要服务器在运行，代码就会运行。

2。由于进行了ajax调用，因此该代码在stackoverflow中不起作用。复制代码，将其粘贴到您的项目中以使其正常工作。

3。如果仍然无法正常工作，则表示您正在面临CORS（跨源策略）问题。 Read this link，搜索Internet / SO。您将找到解决方案。编码愉快：）