Смена картинок в зависимости от времени

[rubyyy]

Всем привет. Сегодня хочу рассказать вам о том, как реализовать смену картинок на сайте, в зависимости от времени суток. То есть, например, днем показываем солнышко, а вечером луну. Как это применить на landing page? Да 1000 вариантов!Наверняка вы все видели доклад Григория Бакунова о посадочных страницах. В нем затрагивалась тема, того, что лучше работает видео или картинка. Так вот, выяснилось, что днем картинка, а вечером - видео. Ведь днем многие на работе и не могут со звуком посмотреть видео, поэтому лучше работают картинки, а вечером, когда большинство уже дома, - лучше работает видео.

[video=youtube;UapiNxeWhmw]https://www.youtube.com/watch?v=UapiNxeWhmw[/video]​

Так вот, решил написать небольшой скрипт на js, который бы реализовывал подобную задачу:

<script>
    document.write('
<div id="contArea"></div>
 
');
    day = new Date();
    hour = day.getHours();
 
    if (hour >= 7 && hour < 12) {
      document.getElementById("contArea").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    } else if (hour >= 12 && hour < 19) {
      document.getElementById("contArea").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    } else if (hour >= 19 && hour < 24) {
      document.getElementById("contArea").innerHTML = '<iframe width="600" height="315" src="https://www.youtube.com/embed/MoGLNlxTqjc" frameborder="0" allowfullscreen></iframe>';
    } else if (hour >= 0 && hour < 7) {
      document.getElementById("contArea").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    };
</script>

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

Теперь немного объясню, как это все работает.
У нас есть блок, в котором мы хотим менять контент, например:

<div id="contArea"></div>

В таком случае нужно указать его в скрипте, вот здесь:

document.write('
 
<div id="contArea"></div>
 
 
');

Дальше мы говорим, что если время находится в промежутке между 12 и 19 часами, то в contArea показываем картинку, если нет, то проверяем следующее условие:

if (hour >= 12 && hour < 19) {
  document.getElementById("contArea").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';

Думаю, что тут все просто. Даже не обязательно что-то понимать в js. Да, можно сократить немного количесвто кода, если использовать jQuery, но хотел реализовать это именно без использования фреймворка. А вообще, подобные штуки лучше писать на серверном языке, думаю. Если у кого-то есть желание, можете переписать на php, а я добавлю потом в статью. А нет, то рано или поздно все равно сделаю это и дополню.
P.S. обновление №1
Как оказалось, многим интересно получение не только часов но и дней, месяцев. К счастью, для того, чтобы поправить ситуацию не нужно ничего мудрить, ведь мы используем объект Date и у него есть много компонентов:

• getFullYear() - год из 4 цифр;
• getMonth() - месяц от 0 до 11;
• getHours() - время по часам от 1 - 24;

А также можно получить минуты, секунды, дни недели, миллисекунды, но об этом можно почитать в любом справочнике по js.

Вот пример с днями:

<script>
    document.write('<div id="contDate"></div>');
    mainDate = new Date();
    myDate = mainDate.getDate();
 
    if (myDate >= 1 && myDate < 10) {
      document.getElementById("contDate").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    } else if (myDate >= 10 && myDate < 15) {
      document.getElementById("contDate").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    } else if (myDate >= 15 && myDate < 20) {
      document.getElementById("contDate").innerHTML = '<iframe width="600" height="315" src="https://www.youtube.com/embed/MoGLNlxTqjc" frameborder="0" allowfullscreen></iframe>';
    } else if (myDate >= 20 && myDate < 1) {
      document.getElementById("contDate").innerHTML = '<img src="http://placehold.it/600x315" alt="" />';
    };
  </script>
 
<div id="contDate">
 
</div>

Если кому-то нужен исходник, то вот он, только там немного другие id:

Пожалуйста, авторизуйтесь для просмотра ссылки.