文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于一天的时间更改背景(使用javascript)

问基于一天的时间更改背景(使用javascript)
EN

Stack Overflow用户
提问于 2010-12-05 17:26:03
回答 1查看 41.3K关注 0票数 6

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

我正在处理一个远程html文件，我将背景和图形存储在独立于实际html文件的服务器上。除了包含背景代码的body部分之外，大多数css都在html文件中，我将其分离并移动到外部样式表中。我做了两个单独的样式表，一个是白天的bg图像，另一个是晚上的图像。这是夜间css样式表中的正文css。

代码语言：javascript
复制
@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代码。但它没有。我把它放在下面，它仍然不能工作。为什么它不起作用？我只想把背景换出来...对时间敏感。

代码语言：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代码，但它仍然不能工作。

代码语言：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>
javascript
dynamic-css
EN

回答 1

Stack Overflow用户

发布于 2010-12-05 17:56:48

我建议使用比neo稍有不同的样式-而不是只设置图像，有两个CSS类，一个用于白天，一个用于夜间-这两个类可以在同一个样式表中。您可以根据一天中的时间设置body的类。这将允许你做更多的事情，而不仅仅是背景。

代码语言：javascript
复制
document.body.className = "day";
or
document.body.className = "night";
票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/4358155

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档