Дизайн та розробка сайту

Как показывать блок, текст, рекламу в определенное время дня или ночи

Показывать в определенное время

Доброго времени суток 🙂

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

Показывать в определенное время

Я покажу Вам как просто сделать так, чтобы какой-то блок показывался в определенное время. Например, Вы хотите показывать рекламу в определенное время суток или есть такой блок, который нужно показывать например только вечером. Так же можно организовать разные шапки сайта для разного времени суток. В общим все зависит от вашей фантазии и нужды.

И так приступим. Для начала разберем простой способ где нужно прятать или показывать один блок. Первым делом нам нужно проверить подключена ли к Вашему сайту библиотека jQuery. Если да, то пропускайте этот шаг, если нет, то Вам нужно это сделать. В шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавьте вот такую строку:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Если у Вас WordPress, библиотека должна быть подключена, но если это не так, то используйте метод подключения из статьи Подключение jQuery библиотеки к WordPress.

Теперь подключим сам скрипт, который будет скрывать или показывать блок по времени. Скрипт не большой, подключается он после библиотеки jQuery.

<script>
$(function() {
var d = new Date()
var time = d.getHours()
if (time >= 8 && time < 18)
$("#alrt_b").css("display", "block")});
</script>

В пятой строке задаем параметр времени. В данном примере блок будет показан с 8 утра до 18 вечера. В шестой строке указываем айди блока, который будем показывать, в примере это блок с ID - alrt_b. В заданное время ему будет присвоено свойство display:block

Дальше добавляете на сайт нужный блок, в том месте где хотите его видеть, например:

<div id="alrt_b">
//Содержание блока, текст или реклама.
</div>

Ну и стили, главным и обязательным свойством в которых будет скрытие блока:

#alrt_b{display:none;}

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

Вместо второго кода добавляем немного усовершенствованный:

<script>
$(function() {
var d = new Date()
var time = d.getHours()
if (time >= 6 && time < 10){
$("#alrt_b").css("display", "block");
} else if (time >= 10 && time < 18) {
$("#alrt_b2").css("display", "block");
} else if (time >= 18 && time < 21) {
$("#alrt_b3").css("display", "block");
} else {
$("#alrt_b4").css("display", "block");
}});
</script>

Как видите в коде задано несколько временных промежутков, суть которых в том, чтобы выводить разные блоки с приветствием от времени суток.

  • С 6:00 по 10:00 - сообщение "Доброе утро".
  • С 10:00 по 18:00 - сообщение "Добрый день".
  • С 18:00 по 21:00 - сообщение "Добрый вечер".
  • В остальное время, то есть с 21:00 по 6:00 - сообщение "Доброй ночи".

Сами блоки будут такими, как и в первом примере их ID совпадает с указанными в скрипте.

<div id="alrt_b">Доброе утро</div>
<div id="alrt_b2">Добрый день</div>
<div id="alrt_b3">Добрый вечер</div>
<div id="alrt_b4">Доброй ночи</div>

Такие же стили. По нужде добавляйте что угодно, главное не удаляйте свойство - display:none.

#alrt_b, #alrt_b2,#alrt_b3,#alrt_b4{display:none;}

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

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top