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

想法是这样的：在阿根廷早上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+偏移量，14+偏移量，22+偏移量]；
var elemento1=document.getElementById（“panel1”）；
var horarios2=[0+偏移量]；
var elemento2=document.getElementById（“panel2”）；
setInterval（函数（）{
var hora=新日期（）.getHours（）；
如果（时间1.包括（（时间+偏移量）%24））{
elemento1.style.display='block'；
}否则{
elemento1.style.display='none'；
}
if（时间2.包括（（时间+偏移量）%24））{
elemento2.style.display='block'；
}否则{
elemento2.style.display='none'；
}
}, 1000);
面板6、14、22
面板0
您的代码正在使用javascript时间。Javascript从用户的机器上花费时间。所以当你访问你的网站时，它会显示你的机器的时间，当我访问时，它会显示我的机器的时间。但是，如果您想要全球通用时间，即在全球范围内显示阿根廷时间06:00，则可以采用以下任一方法

1。使用服务器时间

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

2。使用第三方API

使用其他网站的api。喜欢进行ajax调用，获取所需位置的时间。您可以使用普通javascript或任何ajax库来实现这一点。这里我介绍了两种方法：1）普通javascript和2）使用（一种流行的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

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();
    });
}

将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);
    });


（函数（）{
变量url=
"http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",
horarios1=[6,14,22]，
elemento1=document.getElementById（“panel1”），
horarios2=[0]，
elemento2=document.getElementById（“panel2”）；
函数getTime（url）{
返回新承诺（（解决、拒绝）=>{
const req=new XMLHttpRequest（）；
请求打开（“获取”，url）；
请求加载=（）=>
请求状态===200
？解决（请求响应）
：拒绝（错误（请求状态文本））；
req.onerror=（e）=>拒绝（错误（`networkerror:${e}'）；
请求发送（）；
});
}
setInterval（函数（）{
获取时间（url）
。然后（（数据）=>{
var dateObj=JSON.parse（数据）；
var dateTime=dateObj.dateTime；
var hora=数字（dateTime.slice（11,13））；
if（小时1.包括（小时））{
elemento1.style.display=“块”；
}否则{
elemento1.style.display=“无”；
}
if（时间2.包括（时间））{
elemento2.style.display=“块”；
}否则{
elemento2.style.display=“无”；
}
})
.catch（（错误）=>{
控制台日志（err）；
});
}, 1000);
})();
面板6、14、22
面板0
请问，我该怎么做？我是否需要添加以下行才能工作<代码>$datetime=新日期时间（“现在”，新日期时区（“美国/阿根廷/布宜诺斯艾利斯”）；echo$datetime->format（'Y-m-dh:i:s'）谢谢你的回答。这两种选择似乎都很有趣，但我不知道如何应用它们。我想在Blogger托管的网站上发布这些提醒，但我真的不知道如何使用这两个选项。我假设你不是javascript专业人士，这些都是一些高级概念。这些不是警报。您将在控制台中找到结果（日期和时间）。在您的chrome中按F12，然后单击“控制台”选项卡。你会在那里找到结果。您必须将javascript代码放入标记中。2）检查您的url。单击上一个答案中的url。您将在url字符串的末尾看到“删除它及其在浏览器中的作用。但是，这个双引号如何在url中结束是一个谜。请从url字符串的末尾删除”。3） 这意味着找不到elemento1。您是否在HTML中添加了panel1和panel2 div？并将脚本标记放在页面的末尾，就在结束正文标记之前。做这些，然后让我知道结果。：）很高兴它成功了。由于ajax调用，该函数需要花费时间。脚本标记的定位与此无关。快乐编码：）