Question

更新 - 已经遇到一个问题。只是我的愚蠢错误。如何添加一个函数使这段代码为每个时间块重新运行，以便在打开的浏览器上更新？ - 谢谢

我想要一个简单的图像库（例如20张图像，每张15秒，无限滚动），但所有图像都会根据一天中的时间而改变。例如：上午8点至上午11点，下午12点至下午4点，下午4点至8点，晚上8点至早上7点。我从我发现的现有代码中弄乱了这个，并尝试了很多版本，但没有一个有用。

这是我正在搞乱的代码理念（不工作），但也许我应该完全不同地讨论这个问题。想法？

（不同时间段的例子，只有3张图片 - 但不起作用）

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

// If time is after 8PM or before 7AM
if (n > 20 || n < 7) {
$("img#photo1").attr("src","img/8TO7/photo1.jpg");
$("img#photo2").attr("src","img/8TO7/photo2.jpg");
$("img#photo3").attr("src","img/8TO7/photo3.jpg");
}

else if (n > 16 && n < 20) {
 $("img#photo1").attr("src","img/4TO8/photo1.jpg");
 $("img#photo2").attr("src","img/4TO8/photo2.jpg");
 $("img#photo3").attr("src","img/4TO8/photo3.jpg");
 }

else {
 $("img#photo1").attr("src","img/main/photo1.jpg");
 $("img#photo2").attr("src","img/main/photo2.jpg");
 $("img#photo3").attr("src","img/main/photo3.jpg");
 }
});

Answer 1

以下演示应该做你想要的。

您可以使用setIntervall(callback, time_in_ms)重新运行代码。在演示中，间隔设置为5秒。表明它正在运行。

也许您可以添加图像缓存并检查图像是否仅在必要时重新加载。目前，它会在每次回调时重新加载图像。

您可以在jsFiddle找到相同的代码。

对于测试，您可以将时间传递给var d = new Date('17/12/2014 16:00:00');，以便更轻松地测试是否显示了正确的设置。

＆＃13;

$(document).ready(function () {
    //var d = new Date();
    
    var timer = function () {
        var d = new Date(); //'17/12/2014 06:00:00'); // test date 4pm to 8pm  
        console.log(d);
        var n = d.getHours();
        console.log(n);

        var url = 'http://lorempixel.com/400/200/sports/';
        var urls8pmto7am = [url + '1/', url + '2/', url + '3/'];
        var urls4pmto8m = [url + '4/', url + '5/', url + '6/'];
        var urls = [url + '7/', url + '8/', url + '9/'];

        // If time is after 8PM or before 7AM
        if (n > 20 || n < 7) {
            console.log('show set 8pm to 7am');
            $("#photo1").attr("src", urls8pmto7am[0]);
            $("#photo2").attr("src", urls8pmto7am[1]);
            $("#photo3").attr("src", urls8pmto7am[2]);
        } else if (n >= 16 && n <= 20) {

            console.log('show set 4pm to 8pm');
            $("#photo1").attr("src", urls4pmto8m[0]);
            $("#photo2").attr("src", urls4pmto8m[1]);
            $("#photo3").attr("src", urls4pmto8m[2]);
        } else { // main

            console.log('else, should not be triggered');
            $("#photo1").attr("src", urls[0]);
            $("#photo2").attr("src", urls[1]);
            $("#photo3").attr("src", urls[2]);
        }
    };
    
    timer(); // run immediatly after start
    
    setInterval(timer, 5 *1000); // 1 *1000 *60 *60 runs every hour for testing every 5 seconds
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" id="photo1" />
<img src="" id="photo2" />
<img src="" id="photo3" />

＆＃13;

根据一天中的时间更改Images文件夹

1 个答案: