1. 홈
  2. 질의 응답
  3. 시간을 기준으로 배경 변경 (자바 스크립트 사용)

시간을 기준으로 배경 변경 (자바 스크립트 사용)

2010-12-05 3 views
4

좋아, 나는 하루 중 시간에 따라 배경 무늬로 사용하려는 두 개의 배경 .jpg가 있습니다. 나는 맑은 배경을 오전 7시에서 오후 8 시까 지, 밤 배경을 오후 8시에서 7 시까 지 바란다.시간을 기준으로 배경 변경 (자바 스크립트 사용)

나는 원격 HTML 파일을 만들고 있는데 배경과 그래픽은 실제 HTML 파일과는 별도의 서버에 저장되어있다. css의 대부분은 html 파일에 있습니다. 단, 배경 코드를 포함하고있는 본문 섹션을 제외하고는 분리하여 외부 스타일 시트로 옮겼습니다. 나는 두 개의 분리 된 스타일 시트를 만들었고, 하나는 밤에 bg 이미지 &을 가지고 있었다. 이것은 밤 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; 
     }

제가 생각했던 자바 스크립트 코드를 작성했습니다. 그러나 그렇지 않았습니다. 나는 그것을 바로 밑에 놓았고 여전히 작동하지 않았다. 왜 작동하지 않았습니까? 나는 그저 배경을 바꿀 수 있기를 원한다. 여기 

<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 코드이다. (난 자바 스크립트 코드를 업데이트하고 그것은 여전히 ​​작동하지 않습니다. 

<!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>

출처

2010-12-05 Josh Tha CreativeOne

+0

신체 앞에 있습니다. 그 뒤에 그것을 넣으십시오, 그것이 나의 업데이트 된 예제에 있고, 그것이 작동해야합니다. – neo2862

답변

9

당신은하지 않습니다 각 이미지에 대한 새 스타일 시트를 사용할 필요가 당신은 자바 스크립트에서 배경 이미지 만 변경할 수 있습니다.

<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에서 작동합니다.

출처

2010-12-05 09:35:54 neo2862

+0

나는 그것을 시도하고 그것은 작동하지 않았다. 이것은 정확히 내가 전에 넣었던 것이다. –

+0

–

+1

위치는 중요합니다. 스크립트를 본문의 맨 아래에 놓으면 스크립트가 작동합니다. 머리에 쓰면 문제가 생길 수 있습니다. 많은 사람들이 마크 업의 상단에 CSS를, 하단에 JS를 배치하여 모든 것이 원활하게 실행되도록하는 것이 좋습니다. (물론 외부 파일에 물건을 두는 것이 일반적으로 더 좋지만, 또 다른 문제입니다 ...) –

11

네오와 약간 다른 것을 권하고 싶습니다. 이미지 만 설정하는 대신 두 가지 CSS 클래스를 사용합니다 (하루에 하나, 밤에 하나씩). 둘 다 같은 스타일 시트에있을 수 있습니다. 하루 중 시간대에 따라 신체의 등급을 설정할 수 있습니다. 이렇게하면 배경 이상을 할 수 있습니다.

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

출처

2010-12-05 09:56:48

+0

이것은 좋은 생각입니다! – neo2862

 관련 문제

  • 관련 문제 없음^_^