Как показывать приветствие в зависимости от времени суток? | Блог веб-разработчика MaxGraph

Как показывать приветствие в зависимости от времени суток?

Этот маленький урок действительно очень маленький, здесь мы разберем простейший, но интересный скрипт. Дело в том, что я сейчас дорабатываю свой новый сайт (хочу уже убрать то убожество, что уже год висит на maxgraph.ru, наконец сменю на более крутую вещь). Так вот, там мне как раз понадобилось это, и я написал данный скрипт.

Разметка

Создаем простую разметку (можете сделать как угодно в принципе)

1
<h1><span class="greeting"></span> <span class="greeting-2"></span></h1>
<h1><span class="greeting"></span> <span class="greeting-2"></span></h1>

В эти два span`а у нас и пойдет необходимая информация. Смотрим. (не забудьте подключить jQuery).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  let day = new Date(); 
  let hour = day.getHours(); 
  if (hour>=5 && hour<12) {
    $('h1 .greeting').text('Доброе');
    $('h1.greeting-2').text('утро');
  } else if (hour>=0 && hour<5) {
    $('h1 .greeting').text('Доброй');
    $('h1 .greeting-2').text('ночи');
  } else if (hour>=12 && hour<18) {
    $('h1 .greeting').text('Добрый');
    $('h1 .greeting-2').text('день');
  } else if (hour>=18 && hour<24) {
    $('h1 .greeting').text('Добрый');
    $('h1 .greeting-2').text('вечер');
  }
  let day = new Date(); 
  let hour = day.getHours(); 
  if (hour>=5 && hour<12) {
    $('h1 .greeting').text('Доброе');
    $('h1.greeting-2').text('утро');
  } else if (hour>=0 && hour<5) {
    $('h1 .greeting').text('Доброй');
    $('h1 .greeting-2').text('ночи');
  } else if (hour>=12 && hour<18) {
    $('h1 .greeting').text('Добрый');
    $('h1 .greeting-2').text('день');
  } else if (hour>=18 && hour<24) {
    $('h1 .greeting').text('Добрый');
    $('h1 .greeting-2').text('вечер');
  }

переменная day хранит дату, через getHours мы получаем время нашей системы (то есть, работать это будет везде, независимо от часового пояса). И дальше просто делаем различные условия. Можно сделать через switch, если умеете)
Вот так все просто) просто и работает. На всякий случай, прикреплю для Вас Codepen, чтобы было удобнее.

Всем спасибо, что вы со мной, удачного применения!

Метки: , ,

Понравилось? Оцени!
12345 (2 оценок, среднее: 5,00 из 5)
Загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *