Javascript 根据日期或时间更改CSS

我有一个关于加载JavaScript的问题，JavaScript会根据一天中的时间或日期更改CSS

问题：如何缓存图像，使其不会从一页加载到另一页？该脚本工作正常，并根据一天中的时间将类添加到正文和标题中。但是，当用户单击网站的下一页时，它会重新加载相同的CSS类，并使网站在加载CSS之前闪烁为白色

我已将脚本放在页面底部和页眉中。但它仍然会在加载脚本的每一页上闪烁。有没有办法防止每次用户从一页转到另一页时都加载脚本

下面是Js代码

function TimeOfDaySiteChange() {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        night();
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        dusk();
    } else if (n > 19) {
        // If time is 8PM 
        night();
    } else if (n > 8) {
        // If time is 9AM
        daytime();
    } else {
        // Else use 'dawn' theme
        dawn();
    }
}

function dawn() {
    jQuery('body').addClass('sunrise_bg');
    jQuery('#header_masthead').addClass('sunrise_masthead_bg');
}

function daytime() {
    jQuery('body').addClass('day_bg');
    jQuery('#header_masthead').addClass('day_masthead_bg');
}

function dusk() {
    jQuery('body').addClass('sunset_bg');
    jQuery('#header_masthead').addClass('sunset_masthead_bg');
}

function night() {
    jQuery('body').addClass('night_bg');
    jQuery('#header_masthead').addClass('night_masthead_bg');
}

function init() {
    TimeOfDaySiteChange();
}

window.onload = init;

DaySiteChange（）的函数时间{
var d=新日期（）；
var n=d.getHours（）；
if（n<5）{
//午夜
夜（）；
}否则，如果（n>16&&n<20）{
//如果时间在下午5点到晚上8点之间，日落主题为“身体”
黄昏（）；
}否则，如果（n>19）{
//如果时间是晚上8点
夜（）；
}否则，如果（n>8）{
//如果时间是上午9点
白天（）；
}否则{
//否则使用“黎明”主题
黎明（）；
}
}
函数dawn（）{
jQuery（'body'）.addClass（'sunrise_bg'）；
jQuery（'#header_mashead'）.addClass（'sunrise_mashead_bg'）；
}
功能日（）{
jQuery（'body'）.addClass（'day_bg'）；
jQuery（'#header_mashead'）.addClass（'day_mashead_bg'）；
}
函数黄昏（）{
jQuery（'body'）.addClass（'sunset_bg'）；
jQuery（'#header_mashead'）.addClass（'sunset_mashead_bg'）；
}
功能夜（）{
jQuery（'body'）.addClass（'night_bg'）；
jQuery（'#header_mashead'）.addClass（'night_mashead_bg'）；
}
函数init（）{
TimeOfDaySiteChange（）；
}
window.onload=init；

---

我也尝试过不使用

窗口。onload

你最好的办法是把它作为你身体的第一件事，然后移除

窗口。onload

。您需要稍微调整css，以便只更改

正文上的类

：

.sunrise_bg #header_masthead{

而不是在

#header\u masthead

上创建类

然后运行

TimeOfDaySiteChange（）

使用
onload
可以在应用类之前等待加载整个页面


或者，如果您使用的是html5，您可以更改代码，将类添加到
html
元素中，并将javascript放在文档的
开头。这可能会稍微快一点

是否存在防止每次用户加载脚本的方法
从一页到另一页

简而言之，不是。您当前的实现使用Javascript动态添加类（基于一天中的时间）。为了添加类，您需要在每个页面上运行Javascript

您可以使用James建议的方法来最小化函数运行所需的时间，但如果您的站点使用单独的html文档，则无法一次性加载背景颜色并保留它。
您是否尝试过将代码放置在文档就绪函数中？您不需要向#header(header)masthead添加类，只要做body.sunrise#u bg#header#u masthead{}关于闪光灯；在加载、运行并最终添加类之前，浏览器将显示默认页面。我会将该类添加到服务器端。@powerbucket为什么要这样做？服务器对客户端的时间一无所知哦，没错。我没想过。但我这么做的原因应该是显而易见的（如果成功的话）。我会考虑在服务器上设置一个cookie，它可以在服务器上用于后续的加载。将它作为“代码> <代码>中的第一件事，使用<代码> HTML < /代码>而不是<代码>正文> <代码> >选择器不是更好吗？@伊恩，我不相信它在HTML4中是有效的，但似乎是在HTML5中。什么是无效的？给
元素一个
class
？@ian是的，在html4和xhtml中
html
元素不能有
class
属性。很有趣！我把我原来的评论改为“有了HTML5，不是吗…”：