根据时间更改网站背景的脚本。 -热！-优快云博客

本文介绍了一种使用JavaScript和CSS的脚本，可以根据一天中的不同时间自动更改网站背景。通过设置特定时间点，脚本会加载不同的背景图像，增强用户体验。文章详细说明了如何设置文件结构、编辑CSS和JS文件，以及如何在HTML中调用脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在网上找到了它，并以自己的方式对其进行了自定义；作者的功劳就在那里。实际上，这是一个用于更改背景颜色的脚本，并且在我看来，屏幕上还有其他内容是不必要的。

自定义它尽可能简单，然后将其配置为将图像加载到身体上，这打破了我的CSS，尤其是在我的一个使用CMS JOOMLA的网站中，然后我不得不找到一种方法来加载它在一个div上所以，你去了：

创建一个文件夹并将其命名为“ daynight”，该文件夹必须与页面文件（index.php，index.html等）位于同一目录中。

打开页面的文件，您将在其中更改背景并在<head>标记</ head>之间发布以下内容：


<link href="../daynight/css/CSSTimeSwitch.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="../daynight/js/timeswitch.js"></script>

在HTML的body标签内，发布以下内容：

onload="CSSTimeSwitch();"

这是负责在页面加载后加载js的部分。

所以看起来像这样：

<body onload="CSSTimeSwitch();">

现在在“ daynight”中创建一个文件夹，并将其命名为“ css”，再创建一个文件夹，并将其命名为“ js”。

在CSS内，制作一个文件并将其命名为“ CSSTimeSwitch.css”（如果使用Windows，请不要忘记将OS配置为显示系统文件的扩展名）。

打开css文件并粘贴以下内容：

ps：您可以更改图像路径以匹配您的图像路径。


/*--- after 0:00  -----*/
#bgi.night {background:url(../img/night.jpg) top no-repeat;} 
/*--- after 6:00  -----*/
#bgi.aftersixam {background:url(../img/traveling.jpg) top no-repeat;} 
/*--- after 8:00  -----*/
#bgi.aftereightam {background:url(../img/morning.jpg) top no-repeat;} 
/*--- after 12:00  -----*/
#bgi.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;} 
/*--- after 13:00  -----*/
#bgi.afternoon {background:url(../img/Seaside_Resort_02.jpg) top no-repeat;} 
/*--- after 17:00  -----*/
#bgi.aftefivepm {background:url(../img/Holiday.jpg) top no-repeat;} 
/*--- after 20:00  -----*/
#bgi.evening {background:url(../img/treesnight.jpg) top no-repeat;}

打开js文件夹，创建一个文件，将其命名为“ timeswitch.js”，然后粘贴以下内容：

// © copyright Sibran Lens
// Leave this comment if you want to use this script for your website
// http://blog.e-ss.be   
function CSSTimeSwitch()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours(); 
 if (thehour >= 20)
  display = "evening";  
else if (thehour >= 17)
  display = "afterfivepm"; 
   else if (thehour >= 13)
  display = "afternoon"; 
 else if (thehour >= 12)
  display = "noon"; 
 else if (thehour >= 8)
  display = "aftereightam"; 
 else if (thehour >= 6)
  display = "aftersixam"; 
 else if (thehour >= 0)
  display = "night";   
 var thebody =    document.getElementById("bgi"); 
 thebody.className= display;  
}

那个部分

var thebody =    document.getElementById("bgi");

是负责将图片加载到页面div或表中的部分（我没有测试表部分）。

这意味着您在html中具有ID为“ bgi”的div，例如：<div id =“ bgi”>或表<table id =“ bgi”>（测试该表，稍后再告诉我= ]）。

如果要从正文加载图像，只需删除css文件中的哈希标签，然后将bgi重命名为您的正文ID。

例如：

更改

#bgi.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;}

至

yourbodyid.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;}

它的一部分应该重设bg，以防万一用户使用Internet Explorer 6，但毕竟它只是插入一个灰色bg，一旦它很旧，Google就停止了对IE6的支持。浏览器。

如今，每种浏览器都支持Java脚本，因此，如果您无法在FF或Safari，Opera，Chrome上运行脚本，则可能已禁用了浏览器的Java脚本功能。

好吧，我将整个原始脚本作为附件发布在这里，因此您可以下载并随意使用它。不要忘记删除Google Adwords部分，它是一种流量跟踪器，位于CSSTimeSwitch.html中。

好吧，就是这样。

拥有与您一样酷的一天。

SB ^}

附加的文件

css-time-switcher.zip （12.6 KB，256视图）

From: https://bytes.com/topic/javascript/insights/914521-script-changes-website-background-acording-time-hot