Как менять фоновое изображение тела каждый час?

На моем уроке веб-дизайна нас проинструктировали выполнить недельное упражнение, в котором мы выясним, как творчески подойти к часам, которые показывают время и температуру. Этот класс оценивается по творчеству, мне разрешено и рекомендуется использовать плагины.

На мой взгляд, было бы интересно менять фон моего сайта каждый час, чтобы он совпадал с соответствующим временем. У меня есть несколько изображений распускающегося и закрывающегося цветка, которые, я думаю, было бы интересно соотнести со временем дня.

Что мне делать, чтобы взять то, что у меня уже есть, и сделать так, чтобы я мог менять фоновое изображение каждый час? Это что-то, что должно соответствовать моим существующим часам плагина javascript, или это отдельная реализация полностью? Заранее спасибо!

Я не хочу, чтобы изображение менялось через заданный интервал, я хочу, чтобы определенное время дня соответствовало фоновому изображению.

body {
  background-color: black;
  margin-left: 5%;
  margin-right: 5%;
}

#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);
}
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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 image background clock
person Alison Dyer    schedule 17.10.2016    source источник
comment
Возможный дубликат Изменять изображение на странице HTML каждые несколько секунд   -  person Turnip    schedule 17.10.2016
comment
Подсказка: вы включаете 2 разные версии jQuery. Вам действительно следует загружать только одну версию, когда это возможно.   -  person Mike Cluck    schedule 17.10.2016
comment
Спасибо, Майк Си, за указание на это!   -  person Alison Dyer    schedule 17.10.2016

Ответы (3)


arrow_upward
2
arrow_downward

Вам нужно получать час дня на почасовой основе. В зависимости от часа вы можете изменить фон с помощью jQuery:

$(document).ready(function() {

    setInterval(function(){
        var hour = new Date().getHours();
        if(hour > 7 && hour <= 12)
        {
           // It's morning
           $('body').css('background', 'url(url-to-image-one) no-repeat');
        }
        else if(hour > 12 && hour < 18)
        {
           // It's noon
           $('body').css('background', 'url(url-to-image-two) no-repeat');
        }
        else
        {
            // It's night
            $('body').css('background', 'url(url-to-image-three) no-repeat');
        }
    }, 1000 * 60 *60);

});
person Cashif Ilyas    schedule 17.10.2016
comment
Это именно то, что я ищу! Мне было интересно, не могли бы вы более подробно объяснить, как реализовать это с помощью моего существующего кода. Я новичок в javascript и делаю это в качестве эксперимента. У меня есть только предыдущий опыт работы с CSS и HTML. - person Alison Dyer; 18.10.2016
comment
@AlisonDyer Я обновил свой ответ и добавил полный код javascript. Конечно, вам нужно изменить URL-адреса изображений. - person Cashif Ilyas; 18.10.2016

arrow_upward
2
arrow_downward

Чтобы не усложнять, вы можете setInterval(). Вот как это работает: http://www.w3schools.com/jsref/met_win_setinterval.asp

Я бы проверил текущее время, а затем узнал бы разницу между настоящим и следующим часом (то есть, если бы было 10:30, и я хотел бы знать, сколько времени было между 10:30 и 11), сделайте setTimeout () на этот промежуток времени в миллисекундах и затем вызовите функцию, которая запускает setInterval() функцию, которая будет вызываться каждый час.

Надеюсь это поможет!

person Jeremy Jackson    schedule 17.10.2016

arrow_upward
1
arrow_downward

это код из книги Джона Дакетта javascript и jquery

var today= new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting= 'Good evening!';
else if (hourNow > 12) {
greeting = ' Good afternoon!';
else if (hourNow > 0) {
greeting = 'Good morni ng!';
else {
greeting = 'Welcome! ' ;
}
document .write( ' <h3>' +greeting + ' </ h3> ');

значение переменной приветствия изменяется на основе условия if. См. Date и метод getHours ()

person learningjavascriptks    schedule 17.10.2016