根据一天中的时间更改背景（使用JavaScript）
好吧，我有两个不同的背景.jpg，我想用它作为背景，取决于一天中的什么时间。 我想要从早上7点到晚上8点的阳光明媚的背景和晚上8点到7点的夜晚背景。
我正在处理一个远程html文件，我有背景和graphics存储在一个单独的服务器从实际的html文件。 大部分的CSS都在html文件中，除了包含背景代码的正文部分，我将它们分离并移动到外部样式表中。 我做了两个独立的样式表，一个是每天的图像和一个晚上的图像。 这是在夜间CSS样式表的身体CSS。
@charset "UTF-8"; /* CSS Document */ body { background-image: url('http://itsnotch.com/tumblrhttp://img.dovov.comdaytime_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; } 我写了一个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>
这里是整个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.comhttp://img.dovov.comx.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/tumblrhttp://img.dovov.comdaytime_bg.jpg"; } } else { if (document.body) { document.body.background = "http://itsnotch.com/tumblrhttp://img.dovov.comnighttime_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/tumblrhttp://img.dovov.comNotchTheGuru_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>
您不需要为每个图像使用新的样式表。 您只能更改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/tumblrhttp://img.dovov.comdaytime_bg.jpg"; } } else { if (document.body) { document.body.background = "http://itsnotch.com/tumblrhttp://img.dovov.comnighttime_bg.jpg"; } } </script> </html>
编辑：更新显示页面内脚本的build议位置。 这已经过testing，并在Firefox和Internet Explorer中工作。
我会推荐一些与neo稍有不同的东西 – 而不是只设置图片，有两个CSS类，一个是白天，一个是晚上 – 都可以在同一个样式表中。 你可以根据一天的时间来设置身体的课程。 这将使您可以做的不仅仅是背景。
document.body.className = "day"; or document.body.className = "night";
