javascript按一天中的时间更改背景

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

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

样式:

.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);
});