Блог

Главная - Вопросы по программированию - jQuery фонового изображения не работает, что я делаю не так?

jQuery фонового изображения не работает, что я делаю не так?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь создать сайт с фоновым изображением, которое меняется каждый час. Я хочу, чтобы фоновое изображение соответствовало определенному времени суток. Например, изображение закрытого цветочного бутона будет фоном сайта в 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 amp;amp; 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 amp;amp; 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 'amp;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>

Комментарии:

1. Вы ждали один час, чтобы посмотреть, работает ли это?

2. Ваш код будет работать после первого часа. Попробуйте уменьшить интервал времени, чтобы увидеть, что он работает.

Ответ №1:

Функция, предоставляемая setInterval методу, будет вызвана в первый раз после указанного вами времени (которое составляет один час). Измените его на:

     function changeBackground(){
              var hour = new Date().getHours();
              if(hour > 7 amp;amp; 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 amp;amp; 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);

Комментарии:

1. @Dekel вот почему код не работает, поэтому он действителен в качестве ответа

2. Теперь это работает! Спасибо! Означает ли это, что каждый раз, когда я его меняю, мне нужно ждать один час, чтобы увидеть изменения?

3. @AlisonDyer измените интервал на меньшее значение (например, на 1 минуту) и условия внутри changeBackground функции на минуты (не часы) и проверьте, работает ли он. В противном случае вам нужно подождать один час 😉 PS. если вы найдете мой ответ полезным, отметьте его как правильный. спасибо 😉