Cambio de fondo según la hora del día (usando javascript)
https://stackoverflow.com/questions/4358155
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Está bien, tengo dos .jpgs fondo diferentes que quiero utilizado como el fondo de color dependiendo de la hora del día que es. Quiero que el fondo de sol 07 a.m.-8 p.m. y el fondo de la noche 8 p.m.-07 a.m..
Estoy trabajando en un archivo html a distancia y tengo los fondos y gráficos almacenados en un servidor independiente del archivo html real. La mayor parte de la CSS es en el archivo html a excepción de la sección del cuerpo que contiene el código de fondo que me separe y se trasladó a una hoja de estilo externa. Hice dos hojas de estilo independientes, uno w / día bg imagen y uno con la noche. Este es el css cuerpo que está en la hoja de estilo CSS noche.
@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;
}
He escrito un código javascript que pensé que iba a funcionar. Pero no lo hizo. La coloqué justo debajo de la y que todavía no ha funcionado. ¿Por qué no funcionó? Sólo quiero ser capaz de cambiar el fondo fuera ... tiempo-sensible.
<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>
aquí es todo el código html para que ustedes puedan ver dónde puse el código JavaScript. (He actualizado el código JavaScript y todavía no funciona.
<!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>
Solución
No es necesario utilizar una nueva hoja de estilo para cada imagen. Sólo se puede cambiar la imagen de fondo de 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: actualizado para mostrar la ubicación recomendada de la secuencia de comandos dentro de la página. Esto ha sido probado y funciona en Firefox e Internet Explorer.
Otros consejos
Me gustaría recomendar algo ligeramente diferente que el neo - en lugar de establecer la imagen única, tienen dos clases CSS, uno para el día y otra para la noche - ambos pueden estar en la misma hoja de estilo. Puede configurar la clase del cuerpo dependiendo de la hora del día. Esto le permitirá hacer más que sólo el fondo.
document.body.className = "day";
or
document.body.className = "night";
Tengo dos .jpgs fondo diferentes que quiero utilizado como el ANTECEDENTES dependiendo de a qué hora del día es.
He escrito una solución más completa a este que no sólo puede intercambiar una imagen para una versión de la noche o de día, pero seleccione a partir de grupos de muchas imágenes que corresponden a todas horas del día.
Utiliza php para los datos de sol en sus coordenadas dadas y css puro para hacer las animaciones (sin JavaScript).
para ver una demo aquí:
http://shawnfromportland.com/circadianCssWithPhp/
para la fuente de verificarlo aquí:
https://github.com/shawnfromportland/circadianCssWithPhp
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
