为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕斯709654 2022-09-23 09:22:59

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


查看完整描述

1 回答

?
慕村9548890

TA贡献1574条经验 获得超4个赞

您的代码正在使用脚本时间。Java脚本从用户机器上获取时间。因此,当您访问您的网站时,它将显示您机器的时间,当我访问时,它将显示我的机器的时间。但是,如果您希望全世界的通用时间,即在世界各地显示广告阿根廷时间06:00,那么您可以应用以下任一方法。


1. 使用服务器时间


您需要在此处编写一些后端代码。显示来自服务器的时间,以及整个世界的固定时间。细节取决于您使用的后端技术(php / java / python)。


2. 使用第三方接口


使用来自其他网站的 API。就像 worldtimeapi.org/ 一样。拨打ajax电话,获取所需位置的时间。您可以使用普通的 java 脚本或使用任何 ajax 库来执行此操作。在这里,我包括两种方法:1)普通的javascript和2)使用axios(一个流行的ajax库)


香草


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({

    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 调用,此代码无法在堆栈溢出中工作。将代码复制粘贴到项目中以使其正常工作。

3.如果仍然不起作用,则表示您面临CORS(跨域策略)问题。阅读此链接,搜索互联网/ SO。您将找到您的解决方案。快乐的编码:)


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信