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

Всем привет. Сегодня хочу рассказать вам о том, как реализовать смену картинок на сайте, в зависимости от времени суток.

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

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

Так вот, решил написать небольшой скрипт на 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:

Скачать исходник

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