Question

好的，我有两个不同的背景.jpgs，我想用它作为背景，取决于它是什么时间。我想要从早上7点到晚上8点的阳光背景和晚上8点到早上7点的夜晚背景。

我正在处理一个远程html文件，我将背景和图形存储在与实际html文件不同的服务器上。大多数css都在html文件中，除了包含我分离并移动到外部样式表的背景代码的body部分。我制作了两张单独的样式表，一张是白天bg图像＆amp;一个与夜晚。这是夜间css样式表中的正文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&&currentTime < 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&&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>

<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">&#147;</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}">&#171; Previous</a> &nbsp;&nbsp;
                {/block:PreviousPage}

                {block:NextPage}
                    <a href="{NextPage}">Next &#187;</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>

Answer 1

我推荐的东西与neo略有不同 - 而不是仅设置图像，有两个CSS类，一个用于白天，一个用于夜晚 - 两者都可以在相同的样式表中。您可以根据一天中的时间设置身体的等级。这样你就可以做更多的事情。

document.body.className = "day";
or
document.body.className = "night";

Answer 2

您不需要为每个图像使用新的样式表。您只能更改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。

Answer 3

我有两个不同的背景.jpg想要用作背景取决于一天中的什么时间。

我为此写了一个更完整的解决方案，不仅可以将图像换成夜间或白天版本，还可以从与一天中所有时间相对应的许多图像池中进行选择。

它使用php来获取给定坐标下的太阳数据，并使用纯CSS来制作动画（没有javascript）。

有关演示，请参见此处：
http://shawnfromportland.com/circadianCssWithPhp/

有关源的信息，请在此处查看：
https://github.com/shawnfromportland/circadianCssWithPhp

根据时间更改背景（使用javascript）

3 个答案: