我在网上找到了它,并以自己的方式对其进行了自定义; 作者的功劳就在那里。 实际上,这是一个用于更改背景颜色的脚本,并且在我看来,屏幕上还有其他内容是不必要的。
自定义它尽可能简单,然后将其配置为将图像加载到身体上,这打破了我的CSS,尤其是在我的一个使用CMS JOOMLA的网站中,然后我不得不找到一种方法来加载它在一个div上 所以,你去了:
创建一个文件夹并将其命名为“ daynight”,该文件夹必须与页面文件(index.php,index.html等)位于同一目录中。
打开页面的文件,您将在其中更改背景并在标记 head>之间发布以下内容:
在HTML的body标签内,发布以下内容:
onload="CSSTimeSwitch();"
这是负责在页面加载后加载js的部分。
所以看起来像这样:
现在在“ 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,例如:
或表
(测试该表,稍后再告诉我= ])。 如果要从正文加载图像,只需删除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
推荐阅读
本文介绍了如何使用EasyMock进行单元测试,特别是当测试对象的合作者依赖于外部资源或尚未实现时。通过具体的示例,展示了EasyMock在模拟对象行为方面的强大功能。 ...
[详细]
蜡笔小新 2024-12-18 13:03:19
本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ...
[详细]
蜡笔小新 2024-12-19 10:19:35
Google排名优化-面向Google(Search Engine Friendly)的URL设计 ...
[详细]
蜡笔小新 2024-12-19 16:16:50
本文将指导如何向ReactJS计算器应用添加必要的功能,使其能够响应用户操作并正确计算数学表达式。 ...
[详细]
蜡笔小新 2024-12-19 13:09:18
本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ...
[详细]
蜡笔小新 2024-12-19 12:41:37
探讨如何利用Electron框架,通过拖动HTML元素(如音乐列表项)到桌面来实现本地文件的复制。 ...
[详细]
蜡笔小新 2024-12-19 09:14:47
本文详细探讨了JavaScript中四种获取CSS样式的不同方法:style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题,并提供了解决方案。 ...
[详细]
蜡笔小新 2024-12-18 19:27:53
YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ...
[详细]
蜡笔小新 2024-12-18 14:59:54
本文详细介绍了Java中的注解功能,包括如何定义注解类型、设置注解的应用范围及生命周期,并通过具体示例展示了如何利用反射机制访问注解信息。 ...
[详细]
蜡笔小新 2024-12-19 15:09:03
本文将探讨动态链接库的基本概念,包括Windows下的动态链接库(DLL)和Linux下的共享库(Shared Library),并详细介绍如何在Linux环境中创建和使用这些库。 ...
[详细]
蜡笔小新 2024-12-19 09:08:40
本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ...
[详细]
蜡笔小新 2024-12-19 06:28:15
请看|间隔时间_Postgresql 主从复制 ...
[详细]
蜡笔小新 2024-12-19 03:24:54
本文详细介绍了如何在 Eclipse 集成开发环境中配置 JSP 运行环境,包括必要的软件下载、Tomcat 服务器的配置以及常见问题的解决方法。 ...
[详细]
蜡笔小新 2024-12-18 19:54:43
本文介绍了如何利用Java中的URLConnection类来实现基本的网络爬虫功能,包括向目标网站发送请求、接收HTML响应、解析HTML以提取所需信息,并处理可能存在的递归爬取需求。 ...
[详细]
蜡笔小新 2024-12-18 19:40:22
本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ...
[详细]
蜡笔小新 2024-12-18 17:56:15
KeNnyT0nGMM_934
这个家伙很懒,什么也没留下!