根据一天中的时间更改背景（使用javascript）
红砚文
问题内容：
问题答案：
好的，我有两个要用作背景的不同背景.jpg，具体取决于一天中的什么时间。我想从早上7点到晚上8点有阳光背景，从晚上8点到早上7点有夜背景。
我正在处理远程html文件，并且将背景和图形与实际html文件存储在单独的服务器上。除了包含我分离并移至外部样式表的背景代码的主体部分以外，大多数css都位于html文件中。我制作了两个单独的样式表，一个带有白天的背景图像，一个带有夜景。这是夜间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;
}
我写了一个我认为可以工作的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.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>
问题答案：
您无需为每个图像使用新的样式表。您只能通过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>
编辑： 更新以显示页面内脚本的推荐位置。这已经过测试，可以在Firefox和Internet Explorer中使用。
类似资料：
-
Java脚本代码段 在Servlet 这很好用！但是我想相应地改变div（反馈）的背景色，这意味着如果条件为真，背景色应该是绿色，否则背景色应该是红色（否则）
-
问题内容： 我的站点读取一个XML文件，该文件包含数据表的信息（值）。我使用CSS设置表格样式，并且一切正常。 为了获得更好的用户体验，我想知道是否有可能根据其值动态更改每个单元格的背景颜色？ 例如： 每个包含小于5的数字的单元格都有红色背景色； 每个大于等于“ 5”的单元格具有绿色背景色。 我对此的第一个解决方案是使用Javascript-但我想知道是否有办法仅使用CSS样式来解决此问题？ 问题
-
您好，我是java jtable的新手。我正在寻找一种在我的程序中有效的方法，但我没有找到它的任何运气。这是我的Jtable 数据来自ms Access数据库，但我想改变状态列中值为“非活动”的行的背景/前景。我在网上找到了很多例子，但所有的例子在我的程序中都是不可能的。有人能帮帮我吗？这是我的模特 这是创建我的表的方法，以及我如何从数据库中获取数据 我该如何添加以这种方式重新绘制的表格？有人能举
-
问题内容： 我正在尝试一些非常简单的方法：使用Material-UI主题为网站构建两个主题： 一个主题和一个主题，但效果不佳：该主题位于每个Material-UI react元素上，但是html文档上的root元素仍具有相同的默认白色背景。 当然，可以通过使用纯.css攻击身体来更改它： 但是我一直想用React动态地更改它，尽管这可以工作，但是不能： 而且我在这里迷路了，有没有办法用Materi
-
因为我使用可变颜色的按钮，我需要添加内联css。悬停颜色是其他变量。我不能在内联css上添加悬停选择器，所以我必须使用js。我试着用. hover（）来做，但是当我悬停按钮时，两种颜色都消失了。 代码： HTML:
-
基于这个问题我这样做了： 所以我有票，每张票都有不止一个棋盘。我想换每张票的颜色。 结果: 颜色是正确的，但是在滚动后，颜色变得不规则，如下图所示。 注：每个“ticket0、ticket1、ticket2”等应具有交替颜色。