背景圖片jQuery不起作用，我在做什么錯？

Question

我正在嘗試創建一個網站，該網站的背景圖片每小時都會更改。 我希望背景圖片與一天中的特定時間相對應。 例如，關閉的芽的圖像將是上午12點的場所背景，而盛開的芽的圖像將成為下午12點的場所背景。

我很確定我目前正在實施的方法是正確的方法，經檢查我沒有任何錯誤，但是背景圖像沒有出現。 我究竟做錯了什么？ 是我使用jQuery還是代碼其他方面的方式？ 任何幫助是極大的贊賞。 提前致謝。

 body { margin-left: 5%; margin-right: 5%; } #demo { color: white; } #txt { color: white; float: left; font-family: OpenSans; font-size: 90px; margin: 20px; } #weather { color: white; float: right; font-family: OpenSans; font-size: 40px; margin: 20px; }

 <!DOCTYPE html> <html> <head> <title>Blooming Time And Temperature</title> <link href="css/format.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <script> function startTime() { document.getElementById('txt').innerHTML = moment().format("hh:mm A"); var t = setTimeout(startTime, 1000); var hour = moment().hour() } </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function() { setInterval(function(){ var hour = new Date().getHours(); if(hour > 7 && hour <= 12) { // It's morning $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat'); } else if(hour > 12 && hour < 18) { // It's noon $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat'); } else { // It's night $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat'); } }, 1000 * 60 *60); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> <script> $(document).ready(function() { $.simpleWeather({ location: 'Brooklyn, NY', woeid: '', unit: 'f', success: function(weather) { html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>'; html += '<div id="city">'+weather.city+', '+weather.region+'</div>'; $("#weather").html(html); }, error: function(error) { $("#weather").html('<p>'+error+'</p>'); } }); }); </script> </head> <body onload="startTime()""> <div id="txt"></div> <div id="weather"></div> </body> </html>

Answer 1

setInterval方法提供的函數將在您提供的時間之后（這是一個小時）第一次被調用。 更改為：

    function changeBackground(){
              var hour = new Date().getHours();
              if(hour > 7 && hour <= 12)
              {
                 // It's morning
                 $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
              }
              else if(hour > 12 && hour < 18)
              {
                 // It's noon
                 $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
              }
              else
              {
                  // It's night
                  $('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
              }
          }
   changeBackground(); // invoke for the first time manually
   setInterval(changeBackground, 1000 * 60 * 60);

背景圖片jQuery不起作用，我在做什么錯？

問題描述

1 個解決方案

解決方案1
3 已采納 2016-10-18 18:24:07

背景圖片jQuery不起作用，我在做什么錯？

問題描述

1 個解決方案

解決方案1 3 已采納 2016-10-18 18:24:07

解決方案1
3 已采納 2016-10-18 18:24:07