Javascript для изменения изображения в зависимости от времени

Question

По сути, у меня есть скрипт, который меняет фон страницы в зависимости от времени.

<script language="JavaScript">
day=new Date()     //..get the date
x=day.getHours()    //..get the hour

if(x>=0 && x<4) {

   document.write('<style type="text/css">#header{background: white url(images/assets/1st.jpg); color: black}"></style>')

} else

if(x>=4 && x<12) {

   document.write('<style type="text/css">#header{background: white url(images/assets/2nd.jpg); color: black}"></style>')

} else

if(x>=12 && x<18) {

   document.write('<style type="text/css">#header{background: white url(images/assets/3rd.jpg); color: black}"></style>')

} else

if (x>=18 && x<24) {

   document.write('<style type="text/css">#header{background: white url(images/assets/4th.jpg); color: black}"></style>')

}

Итак, как вы можете видеть, первый фон меняется с 4 утра дои так далее.

Что я хотел бы сделать, так это менять фон в разное время каждый день, читая из какого-то текстового файла или чего-то еще.Например, 10 июня первый фон меняется в 4:15 утра, а остальные изменяются в разное время, 11 июня первый фон меняется в 4:22 утра или около того и т. Д.

Может ли кто-нибудь найтимне или напишите мне что-нибудь для этого?Я нигде ничего не могу найти!

Большое спасибо

Answer 1

Давайте начнем с переписывания сценария в более современной форме (т. Е. С использованием тега script, который не считается устаревшим, объявления переменных ...) и помещения параметров в массив, чтобы сделать его более настраиваемым:

<script type="text/javascript">

var now = new Date();
var date = (now.getMonth() + 1) * 100 + now.getDate();
var time = now.getHours() * 100 + now.getMinutes();

var settings = [
  { date: 1224, time: 2400, image: 'xmas.jpg'}, // all christmas eve
  { date: 704, time: 2400, image: 'bang.jpg'}, // all fourth of july
  // any other day:
  { date: -1, time: 400, image: '1st.jpg'},
  { date: -1, time: 1200, image: '2nd.jpg'},
  { date: -1, time: 1800, image: '3rd.jpg'},
  { date: -1, time: 2400, image: '4th.jpg'}
];

var setting;
for (var i = 0; i < settings.length; i++) {
  var s = settings[i];
  if ((s.date == -1 || s.date == date) && time < s.time) {
    setting = settings[i];
    break;
  }
}

document.write('<style type="text/css">#header{background: white url(images/assets/'+setting.image+'); color: black}</style>');

</script>

Примечание: я удалил spurios "> в коде таблицы стилей.

Edit:

Я добавил код для обработки дат и упростил формат времени. В конце настроек у вас есть пункты с date: -1, которые применяются к любой дате, которая не является более ранней в настройках.

Answer 2

На сервере поместите файл в формате, таком как JSON или XML, с информацией об изменениях в фоновом режиме.

Например, что-то вроде этого: (файл: http://example.com/bg.json)

{
    "default": {
        "00:00": "http://example.com/image1.png",
        "04:00": "http://example.com/image2.png",
        "10:00": "http://example.com/image3.png",
        "18:00": "http://example.com/image4.png",
    },
    // In format DD/MM/YYYY
    // This means that every Christmast (every year)
    "24/12" : {
        "00:00": "http://example.com/mary-xmas.png"
    },
    // and so on ...
}

Далее вы загрузите этот файл по URL-адресу jQuery json (ajax), например: http://example.com/index.html:

$(function() {
      $.ajax({
          url: 'bg.json',
          type: 'json',
          success: function(data) {
              // In data you have complete object, you can easily parse it
              // and create timer to change the background 
          }
      });
  });

А для изменения фона лучше использовать это:

$('#header').css('background', 'white url(...) scroll no-repeat 0 0');

Для этого нужен jQuery, но не так уж сложно переписать его на чистый JavaScript или другой каркас, такой как Prototype или Mootools.

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