0

我正在为一个慈善机构建立一个非常简单的移动网站，他们希望在底部显示他们自己的广告横幅，供当地的支持企业使用。我有一个简单的 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 在触摸设备上的支持不是很好（这将是一个主要问题）。

4

2 回答 2

0

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

<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 输出中。

于 2013-10-08T15:34:50.337 回答
0

嗯。

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

像这样的东西怎么样：

 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 ]

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

于 2013-10-07T10:02:17.760 回答