Доброго времени суток 🙂
В комментариях к одной из моих статей, посетитель спросил меня, как показывать содержимое в определенное время суток. Ответив ему, я решил, а почему бы не написать об этом отдельную статью. Возможно, кому-то станет очень полезным данная статья и он сможет применить ее у себя на сайте.
Я покажу Вам как просто сделать так, чтобы какой-то блок показывался в определенное время. Например, Вы хотите показывать рекламу в определенное время суток или есть такой блок, который нужно показывать например только вечером. Так же можно организовать разные шапки сайта для разного времени суток. В общим все зависит от вашей фантазии и нужды.
И так приступим. Для начала разберем простой способ где нужно прятать или показывать один блок. Первым делом нам нужно проверить подключена ли к Вашему сайту библиотека 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>
Как видите в коде задано несколько временных промежутков, суть которых в том, чтобы выводить разные блоки с приветствием от времени суток.
Сами блоки будут такими, как и в первом примере их 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;}
Если проявить немного фантазии, можно сделать много интересного используя данные примеры. если Вам пригодился данный материал, опишите в комментариях для чего Вы его использовали, думаю многим будет интересно.
На этом все, спасибо за внимание. 🙂