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

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

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

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

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

9 комментариев

  • Михаил

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

    Ответить
  • dimadv7

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

    Ответить
  • webmarka

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

    Ответить
  • dimadv7

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

    Ответить
  • Артем

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

    Ответить
  • dimadv7

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

    Ответить
  • Артем

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

    Ответить
  • Иван

    А можно ли так сделать по дням недели ? что бы акции была на определенный день

    Ответить
  • Ксения

    Дмитрий, здравствуйте. Ваш сайт просто кладезь решений, огромное спасибо Вам. Я не сильна в JS, поэтому прошу помощи — мне необходимо реализовать на сайте показы листовок с бизнес-ланчами по одному на каждый день, которые будут меняться по кругу каждые 2 недели, с ПН по ПТ.
    Т.е. будет 10 картинок: 1 запускается в ПН, вторая во ВТ /…/ пятая в ПТ, затем СБ-ВС выходные, пауза, и в ПН запускается шестая, /…/ в пятницу десятая, затем СБ-ВС выходные, и в понедельник цикл обнуляется — снова первая и т.д.
    Как это реализовать?
    PS. Есть решение по php, но мне оно неудобно, больше нравится Ваша реализация.
    1. Блок
    <div id="head" class="»>

    2. PHP функция
    <?php
    $now_hours = date('G');
    if($now_hours<7)
    {
    $time = 'time-night';
    }
    elseif($now_hours=11 )
    {
    $time = 'time-morning';
    }
    elseif($now_hours>=11 && $now_hours=18 && $now_hours

    где параметр времени — G, что означает часы в 24-часовом формате без ведущих нулей от 0 до 23.

    $time = 'time-night'; — имя класса, который будет присвоен блоку.
    time-night — ночь
    time-morning — утро
    time-day — день
    time-evening — вечер.

    $now_hours=11 — задаем промежуток времени.

    3. CSS стили
    /* НОЧЬ */
    .time-night{background:url(images/night.jpg);}
    /* УТРО */
    .time-morning{background:url(images/morning.jpg);}
    /* ДЕНЬ */
    .time-day{background:url(images/day.jpg);}
    /* ВЕЧЕР */
    .time-evening{background:url(images/evening.jpg);}

    Ответить

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

 

Подписывайтесь на обновления, чтобы ничего не пропустить.