时间戳

首页 > 解决方案 > 全球同时按时间显示/隐藏广告

javascript - 全球同时按时间显示/隐藏广告

问题描述

这个想法是这样的：在阿根廷早上 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>

先感谢您。

标签： javascripthtmlcssblogger

解决方案

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

1.使用服务器时间

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

2. 使用第三方 API

使用其他网站的 api。喜欢worldtimeapi.org/。进行ajax调用，获取所需位置的时间。您可以使用纯 javascript 或使用任何 ajax 库来做到这一点。这里我包括两种方法：1）普通的 javascript 和 2）使用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/是第三方服务。如果他们选择终止他们的服务，您的代码将会中断。但是如果你使用你的服务器时间，只要你的服务器在运行，你的代码就会运行。

2.由于ajax调用，这段代码在stackoverflow中不起作用。将代码复制粘贴到您的项目中以使其工作。

3.如果还是不行，说明你遇到了CORS（cross origin policy）问题。阅读此链接，搜索互联网/SO。你会找到你的解决方案。快乐编码:)

推荐阅读