背景图片 jQuery 不工作，我做错了什么？答案

【问题标题】：Background Image jQuery Isn't Working, What Am I Doing Wrong?背景图片 jQuery 不工作，我做错了什么？
【发布时间】：2016-10-18 18:20:37
【问题描述】：

我正在尝试创建一个背景图像每小时更改一次的网站。我希望背景图像与一天中的某个时间相对应。例如，闭合花蕾的图像将是上午 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>

【问题讨论】：

你等了一小时看看它是否有效？
您的代码将在第一个小时后运行。尝试减少间隔时间以使其正常工作。

标签： javascript jquery html css

【解决方案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);

【讨论】：

@Dekel 这就是代码不起作用的原因，因此它作为答案是有效的
现在可以使用了！谢谢！这是否意味着每次更改时都必须等待一小时才能看到更改？
@AlisonDyer 将间隔更改为较小的值（如 1 分钟），并将 changeBackground 函数内的条件更改为分钟（而不是小时）并检查它是否有效。否则你需要等待一小时;) PS。如果您觉得我的回答有帮助，请将其标记为正确。谢谢;)