根据一天中的时间更改背景（使用 javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4358155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background based on time of day (using javascript)
提问by Josh Tha CreativeOne
Okay, I have two different background .jpgs that I want to used as the backgroud depending on what time of day it is. I want the sunny background from 7am to 8pm and the night background from 8pm to 7am.
好的，我有两个不同的背景 .jpg，我想根据一天中的什么时间将它们用作背景。我想要早上 7 点到晚上 8 点的晴朗背景和晚上 8 点到早上 7 点的夜间背景。
I'm working on a remote html file and I have the backgrounds and graphics stored on a separate server from the actual html file. Most of the css is in the html file except for the the body section that contains the background code which I separated and moved to an external style sheet. I made two separate style sheets, one w/ the day bg image & one with the night. This is the body css that's on the night css style sheet.
我正在处理一个远程 html 文件，我将背景和图形存储在与实际 html 文件不同的服务器上。大多数 css 都在 html 文件中，除了包含我分离并移动到外部样式表的背景代码的正文部分。我制作了两个单独的样式表，一个带有白天的 bg 图像，另一个带有夜晚。这是夜间 css 样式表上的 body css。
@charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://itsnotch.com/tumblr/images/daytime_bg.jpg') !important;
background-repeat: repeat-x !important;
background-attachment: fixed !important;
background-position: top center !important;
background-color:#b68e59 !important;
margin-top:-5px !important;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:14px !important;
}
I've written a javascript code that I thought would work. But it didn't. I placed it right below the and it still didn't work. Why didn't it work? I just want to be able to switch the background out... time-sensitively.
我写了一个我认为可以工作的 javascript 代码。但它没有。我把它放在正下方，但它仍然不起作用。为什么不起作用？我只是希望能够切换背景......时间敏感。
<script type="text/JavaScript">
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (7 <= currentTime&¤tTime < 20) {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/daytime.css' type='text/css'>");
}
else {
document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/nighttime.css' type='text/css'>");
}
rel='stylesheet' href='night.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><link href="http://itsnotch.com/tumblr/files/daytime.css" rel="stylesheet" type="text/css"></noscript>
here is the entire html code so you guys can see where I placed the javascript code.(i updated the javascript code and it still doesn't work.
这是整个 html 代码，所以你们可以看到我放置 javascript 代码的位置。（我更新了 javascript 代码，但它仍然不起作用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#d7a769"/>
<meta name="color:Title" content="#444"/>
<meta name="color:Description" content="#666"/>
<meta name="color:Post Title" content="#c00"/>
<meta name="color:Text" content="#444"/>
<meta name="color:Inline Link" content="#c00"/>
<meta name="color:Quote" content="#666"/>
<meta name="color:Quote Source" content="#444"/>
<meta name="color:Link Post" content="#c00"/>
<meta name="color:Conversation Background" content="#f8f8f8"/>
<meta name="color:Conversation Border" content="#ddd"/>
<meta name="color:Conversation Text" content="#444"/>
<meta name="color:Conversation Label" content="#111"/>
<meta name="color:Photo Border" content="#eee"/>
<meta name="color:Date" content="#fff"/>
<meta name="color:Date Background" content="#ccc"/>
<!-- END DEFAULT COLORS -->
<!-- DEFAULT SETTINGS -->
<meta name="image:Background" content="http://assets.tumblr.com/images/x.gif" />
<meta name="font:Title" content="Arial" />
<meta name="font:Body" content="Lucida Sans" />
<meta name="text:Disqus Shortname" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<style type="text/css">
#content {
width: 850px;
margin: auto;
margin-top: -44px;
padding: 15px;
background-color: {color:Content Background};
position: relative;
}
a {
color: {color:Inline Link};
}
h1 {
padding: 30px 0px 50px 0px;
margin: 0px;
text-align: center;
font: Bold 55px {font:Title};
letter-spacing: -2px;
line-height: 50px;
}
h1 a {
color: {color:Title};
text-decoration: none;
}
#description {
position: absolute;
left: -189px;
top: 150px;
}
#description div {
font: normal 18px {font:Body};
line-height: 20px;
width: 150px;
color: {color:Description};
}
#description div#search {
text-align: left;
}
#description div a {
color: {color:Description};
}
#description #nav_container {
font-size: 13px;
font-weight: bold;
}
#description #nav_container .dim {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#searchresultcount {
margin: 0 0 30px;
text-align: center;
}
.post {
position: relative;
margin-bottom: 40px;
}
.post div.labels {
position: absolute;
right: 435px;
text-align: right;
width: 150px;
}
.post div.date {
background-color: {color:Date Background};
white-space: nowrap;
font: Normal 20px {font:Body};
letter-spacing: -1px;
color: {color:Date};
display: inline;
margin-right: -550px;
padding: 3px 5px 0px 5px;
line-height: 20px;
}
.post div.date a {
color: {color:Date};
text-decoration: none;
}
.post img {
max-width: 100%;
}
.post h2 {
font-size: 18px;
font-weight: Bold;
color: {color:Post Title};
letter-spacing: -1px;
margin: 0px 0px 10px 0px;
}
.post h2 a {
color: {color:Post Title};
text-decoration: none;
}
/* Regular Post */
.post .regular {
font-size: 12px;
color: {color:Text};
line-height: 17px;
}
.post .regular blockquote {
font-style: italic;
}
/* Photo Post */
.post .photo img {
border: solid 10px {color:Photo Border};
}
.post .photo div.caption {
font-size: 11px;
color: {color:Text};
margin-top: 5px;
}
.post .photo div.caption a {
color: {color:Text};
}
/* Quote Post */
.post .quote span.quote {
font: Bold 28px {font:Body};
letter-spacing: -1px;
color: {color:Quote};
}
.post .quote span.quote a {
color: {color:Quote};
}
.post .quote span.quote big.quote {
font: Bold 60px Georgia, serif;
line-height: 8px;
vertical-align: -20px;
}
.post .quote span.source {
font-size: 16px;
font-weight: Bold;
color: {color:Quote Source};
letter-spacing: -1px;
}
.post .quote span.source a {
color: {color:Quote Source};
}
/* Link Post */
.post .link a.link {
font: Bold 20px {font:Body};
letter-spacing: -1px;
color: {color:Link Post};
}
.post .link span.description {
font-size: 13px;
font-weight: normal;
letter-spacing: -1px;
}
/* Conversation Post */
.post .conversation ul {
background-color: {color:Conversation Background};
list-style-type: none;
margin: 0px;
padding: 0px;
border-left: solid 5px {color:Conversation Border};
}
.post .conversation ul li {
border-bottom: solid 1px {color:Conversation Border};
font-size: 12px;
padding: 4px 0px 4px 8px;
color: {color:Conversation Text};
}
.post .conversation ul li span.label {
font-weight: bold;
color: {color:Conversation Label};
}
/* Audio Post */
.post .audio div.caption {
font-size: 11px;
color: {color:Text};
margin-top: 5px;
}
.post .audio div.caption a {
color: {color:Text};
}
/* Video Post */
.post .video {
width: 400px;
margin: auto;
}
.post .video div.caption {
font-size: 11px;
color: {color:Text};
margin-top: 5px;
}
.post div.video div.caption a {
color: {color:Text};
}
/* Twitter Text */
.twtr-tweet-text {
font: 11px Verdana, Arial, Helvetica, sans-serif !important;
}
.twtr-tweet-shell {
width:190 !important;
}
/* Footer */
#footer {
margin: 40px 0px 30px 0px;
text-align: center;
font-size: 12px;
}
#footer a {
text-decoration: none;
color: {color:Text};
}
#footer a:hover {
text-decoration: underline;
}
.query { font-weight: bold; }
{CustomCSS}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.post div.labels {
right: 450px;
}
</style>
<![endif]-->
<link href="http://itsnotch.com/tumblr/files/gurucss.css" rel="stylesheet" type="text/css">
<!--Google Tracker Code--->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19744657-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/JavaScript">
<!--
var currentTime = new Date().getHours();
if (7 <= currentTime&¤tTime < 20) {
if (document.body) {
document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
}
}
else {
if (document.body) {
document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
}
}
-->
</script>
<noscript><link href="http://itsnotch.com/tumblr/files/daytime.css" rel="stylesheet" type="text/css"></noscript>
</head>
<body>
<div id="content">
<h1><a href="/"><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></a></h1>
<div id="description">
<div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
</div>
{Description}
<p id="nav_container">
<a href="/archive" id="archive_link">Archive</a>
<span class="dim">/</span>
<a href="{RSS}">RSS</a>
</p>
</div>
</div>
{block:SearchPage}
<div id="searchresultcount">
<p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
</div>
{/block:SearchPage}
{block:Posts}
<div class="post">
<div class="labels">
{block:NewDayDate}
<div class="date"><a href="{Permalink}">{Month} {DayOfMonth}</a></div>
{/block:NewDayDate}
{block:SameDayDate}
<div class="date"><a href="{Permalink}">+</a></div>
{/block:SameDayDate}
</div>
{block:Regular}
<div class="regular">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
<span class="quote">
<big class="quote">“</big> {Quote}
</span>
{block:Source}<span class="source">{Source}</span>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Audio}
<div class="audio">
{AudioPlayerGrey}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
</div>
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
<div style="text-align: right; margin-top: 5px">
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{/block:Permalink}
{/block:IfDisqusShortname}
{/block:Posts}
<div id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
</div>
</div>
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
</html>
回答by Joe Enos
I'd recommend something slightly different than neo - rather than setting the image only, have two CSS classes, one for day and one for night - both can be in the same stylesheet. You can set the body's class depending on the time of day. This will allow you to do more than just the background.
我推荐一些与 neo 略有不同的东西——而不是只设置图像，有两个 CSS 类，一个用于白天，一个用于夜晚——两者都可以在同一个样式表中。您可以根据一天中的时间设置 body 的类。这将使您可以做的不仅仅是背景。
document.body.className = "day";
or
document.body.className = "night";
回答by neo2862
You don't need to use a new stylesheet for each image. You can change only the background image from javascript:
您不需要为每个图像使用新的样式表。您只能从 javascript 更改背景图像：
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
if (document.body) {
document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
}
}
else {
if (document.body) {
document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
}
}
</script>
</html>
EDIT:updated to show the recommended location of the script inside the page. This has been tested and works in Firefox and Internet Explorer.
编辑：更新以显示页面内脚本的推荐位置。这已经过测试并且可以在 Firefox 和 Internet Explorer 中使用。
回答by Shawn K
I have two different background .jpgs that I want to used as the backgroud depending on what time of day it is.
我有两个不同的背景 .jpg，我想根据一天中的什么时间将它们用作背景。
I've written a more complete solution to this that can not only swap out an image for a night or day version, but select from pools of many images corresponding to all times of day.
我为此编写了一个更完整的解决方案，它不仅可以将图像换成夜间或白天版本，还可以从与一天中所有时间对应的许多图像池中进行选择。
It uses php for the sun data at your given coordinates and pure css to do the animations (no javascript).
它使用 php 作为给定坐标处的太阳数据和纯 css 来制作动画（无 javascript）。
for a demo see here:
http://shawnfromportland.com/circadianCssWithPhp/
有关演示，请参见此处：http :
//shawnfromportland.com/circadianCssWithPhp/
for the source check it out here:
https://github.com/shawnfromportland/circadianCssWithPhp
对于源代码，请在此处查看：https :
//github.com/shawnfromportland/circadianCssWithPhp
