从固定的服务器时间启动图像交换JavaScript

start image swap javascript from fixed server time

本文关键字：启动 图像 交换 JavaScript 时间 服务器      更新时间：2023-09-26

我正在为慈善机构建立一个非常简单的移动网站，他们想在底部为当地支持企业展示自己的广告横幅。我有一个简单的Javascript，它每10秒交换一次图像横幅，以换取序列中的下一个：

window.onload = function ()
{
    var rotator = document.getElementById("adBox");
    var images = rotator.getElementsByTagName("img");
    for (var i = 1; i < images.length; i++)
    {
      images[i].style.display = "none";
    }
    var counter = 1;
    setInterval(function ()
    {
       for (var i = 0; i < images.length; i++)
       {
          images[i].style.display = "none";
       }
       images[counter].style.display = "block";
       counter++;
       if (counter == images.length)
       {
         counter = 0;
       }
    }, 7000); //1000 = 1 second
};
<body ontouchstart="">
    <div id="adBox">
        <img src="_/ads/1.jpg" alt="One" width="320" height="70">
        <img src="_/ads/2.jpg" alt="Two" width="320" height="70">
        <img src="_/ads/3.jpg" alt="Three" width="320" height="70">
    <div>
</body>

但是，当您加载不同的页面时，这会重置并返回到序列的开头。我想做的是在固定的服务器时间（比如午夜）开始序列并循环播放，这样当您加载新页面时，您不会回到横幅的开头，而是转到"该服务器时间的广告"。

我认为这是最简单，最公平的广告方式。我确实考虑过使用 iFrame，但这意味着主站点必须坐在一个站点中，我相信触摸设备上对 iFrame 的支持不是很好（这将是这方面的一个主要问题）。

嗯。

听起来您甚至不需要图像来"旋转"。

像这样的事情怎么样：

 Case(serverTime)
     If( 00.00 -> 04.00 )[ show ad #1 ]
     If( 04.01 -> 08.00 )[ show ad #2 ]
     If( 08.01 -> 12.00 )[ show ad #3 ]
     If( 12.01 -> 14.00 )[ show ad #4 ]

显然以上不是有效的代码，但你明白了吗？

我想了

很久你的要求，我想我有一个解决方案：

<html>
    <head>
        <script>
            window.onload = function ()
            {
                var pictureArray = new Array
                (
                  "https://www.gravatar.com/avatar/0eb8371e227b5f9993968b5f90f2a1d8?s=32&d=identicon&r=PG", 
                  "https://www.gravatar.com/avatar/9be5d328127c377109b295b5941733fb?s=32&d=identicon&r=PG",
                  "https://www.gravatar.com/avatar/9e84f23bd4c8b566e466a2d4d7fc5ed4?s=32&d=identicon&r=PG"
                );
                var counter = 0;
                var currentHour = new Date().getHours();
                if (currentHour >= 8 && currentHour < 16)
                {
                    counter = 1;
                } else if (currentHour >=16 && currentHour <= 23) {
                    counter = 2;
                }
                var rotator = document.getElementById("adBox");
                var images = rotator.getElementsByTagName("img");
                images[0].src = pictureArray[counter];
                setInterval(function ()
                {
                    images[0].src = pictureArray[counter];
                    counter++;
                    if (counter == pictureArray.length)
                    {
                        counter = 0;
                    }
                }
                , 7000); //1000 = 1 second
            };
        </script>
    </head>
    <body ontouchstart="">
        <div id="adBox">
            <img src="" alt="pic" width="320" height="70">
        <div>
    </body>
</html>
我

稍微改变了你的代码，因为在我眼里，你原来的方式是复杂。我希望这就是你想要的 - 更好的理解 - 存档。

注意：Javascript在客户端工作，因此需要本地计算机的时间。如果你想从服务器中获取时间，你必须把它放在你的HTML输出中。

相关文章：