根据时间更改网站背景的脚本。热！

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

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

创建一个文件夹并将其命名为“ daynight”&＃xff0c;该文件夹必须与页面文件&＃xff08;index.php&＃xff0c;index.html等&＃xff09;位于同一目录中。

打开页面的文件&＃xff0c;您将在其中更改背景并在标记之间发布以下内容&＃xff1a;


 
 在HTML的body标签内&＃xff0c;发布以下内容&＃xff1a;

onload&＃61;"CSSTimeSwitch();"这是负责在页面加载后加载js的部分。

所以看起来像这样&＃xff1a;

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

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

打开css文件并粘贴以下内容&＃xff1a;

ps&＃xff1a;您可以更改图像路径以匹配您的图像路径。


/*--- 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文件夹&＃xff0c;创建一个文件&＃xff0c;将其命名为“ timeswitch.js”&＃xff0c;然后粘贴以下内容&＃xff1a;

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

var thebody &＃61;    document.getElementById("bgi");是负责将图片加载到页面div或表中的部分&＃xff08;我没有测试表部分&＃xff09;。

这意味着您在html中具有ID为“ bgi”的div&＃xff0c;例如&＃xff1a;

或表&＃xff08;测试该表&＃xff0c;稍后再告诉我&＃61; ]&＃xff09;。

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

例如&＃xff1a;

更改

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

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

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

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

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

好吧&＃xff0c;就是这样。

拥有与您一样酷的一天。

SB ^}

附加的文件

css-time-switcher.zip &＃xff08;12.6 KB&＃xff0c;256视图&＃xff09;

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