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

Смена картинок в зависимости от времениВсем привет. Сегодня хочу рассказать вам о том, как реализовать смену картинок на сайте, в зависимости от времени суток. То есть, например, днем показываем солнышко, а вечером луну. Как это применить на 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:

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

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

  1. Михаил

    Еще бы хотелось, сделать условия не по часам, а, например, по дням. Чтобы например, в течение недели менялась акция. Один день один товар, другой день другой, потом третий, и так далее. А то когда акция не меняется, то получается псевдоакция. Заходишь в любой момент на сайт, а там как всегда осталось полчаса до конца акции. А если сами акции будут меняться, тогда будет всё по честному. Никто не запрещает повторять акцию, скажем, раз в неделю.

    • dimadv7

      Обновил статью, добавил по дням)

  2. webmarka

    Тоже хотел бы сделать эти ссылки невидимыми. Только приступаю к изучению css и затрудняюсь, что там надо прописать. Помогите, пожалуйста! И спасибо за отличный сайт.

    • dimadv7

      Какие ссылки, не понял о чем речь идет?

  3. Артем

    Дмитрий, приветствую! Подскажи, а код не в одну строку как можно менять в зависимости от времени? Например не картинку или айфрейм, а форму обратной связи, где несколько инпутов и дивов?

    • dimadv7

      Привет, ну куча же подходов. Можно скрывать и показывать нужные элементы, путем добавления display:block или none. Можно добавлять класс нужному элементу у которого изначально display: none, а при наступлении определенного времени, давать ему display: block. Можно хоть код всей формы прописать туда, где сейчас картинка.

    • Артем

      Код всей формы туда вписать не получится. Работать не будет!) Уже сделал загрузку css в зависимости от времени, как раз с помощью параметра display. Но все-равно спасибо!

Добавить комментарий