Question

我有以下脚本按时间更改图像，但是可以更改其他CSS，如背景或文字颜色以及图像？

感谢您的帮助！

var imgs = [
            'http://myurl.com/1.jpg', 
            'http://myurl.com/2.jpg', 
            'http://myurl.com/3.jpg', 
            'http://myurl.com/4.jpg'
            ]; 
            $(document).ready(function () {
            $('#img').ImageResize({ origImageWidth: "924" });
            var now = new Date();
            var HH = now.getHours();
            if ((HH >= 6) && (HH < 10)) {
            document.getElementById('img').src = imgs[0];
            } else if ((HH >= 10) && (HH < 20)) {
            document.getElementById('img').src = imgs[1];
            } else if ((HH >= 20) && (HH < 24)){
            document.getElementById('img').src = imgs[2];
            } else {
            document.getElementById('img').src = imgs[3];
            }
            });


<img id="img" src="" alt="">

Answer 1

要回答你的问题，是的，你可以这样做。但我建议每天每小时上课，并随着时间的推移而改变。例如，

css：

.theme-morning {background-color: red; text-color: yellow;}
.theme-evening {background-color: green; text-color: white;}
.theme-night {background-color: blue; text-color: yellow;}
.theme-latenight {background-color: black; text-color: green;}

javascript：

$(document).ready(function () {
    $('#img').ImageResize({ origImageWidth: "924" });
    var now = new Date();
    var HH = now.getHours();
    var selectedImg;
    var theme;
    if ((HH >= 6) && (HH < 10)) {
        selectedImg = imgs[0];
        theme = 'theme-morning';
    } else if ((HH >= 10) && (HH < 20)) {
        selectedImg = imgs[1];
        theme = 'theme-evening';
    } else if ((HH >= 20) && (HH < 24)){
        selectedImg = imgs[2];
        theme = 'theme-night';
    } else {
        selectedImg = imgs[3];
        theme = 'theme-latenight';
    }
    $('#img').attr('src', selectedImg);
    $('body').attr('class', theme);
});

javascript按时间更改背景

1 个答案: