Не знаете, как реализовать скрипт, который будет выводить реальное время суток? - Ну тогда, я попробую Вам правильно все рассказать и предоставить нужную информацию. Прежде всего, хочу сразу заметить, что данный скрипт идеально подойдет к авторизации, когда человек заходит в свой личный кабинет или профиль, будет выводится сразу же первое приветствие. Обычно, на многих сайтах, это бывает достаточно просто и без какого-либо креативного решения, но мы решили немного по импровизировать.
К примеру, давайте продумаем некоторые моменты сразу. Допустим, у нас заходит в свой личный кабинет девушка по имени Виктория, и обычное приветствие бы звучало так: Добро пожаловать, Виктория или Здравствуйте, Виктория. Но это очень скучно и не оригинально, давайте внесем какой-нибудь креатив и вместо Добро пожаловать или Здравствуйте, заменим смысл приветствия на реальное время суток и получится следующее: Доброе утро, Виктория, если это утро, Добрый день, Виктория, если это день и т.д.. Думаю, смысл Вы уловили, поэтому сразу же перейдем к рассмотрению кода.
Первая часть. Файл index.php.
Первым делом, пропишем блочный элемент div и обязательно дадим ему индетификатор time. После укажем любое имя, в данном случае, у нас будет красивое женское имя Виктория.
Соответственно, если у Вас уже есть личный кабинет, туда будет подставляться имя, фамилия или что-то другое, авторизованного пользователя.
<div id="time"> Виктория</div>
Только после этого, в обязательном порядке, подключаем файл time.js.
<script type="text/javascript" src="js/time.js"></script>
Вторая часть. Файл time.js.
Перейдем к самому скрипту, который будет выводить нам реальное время суток, а также по факту, через него будет происходить изменение времени суток и сразу же подробно Вам попробую объяснить, что к чему относится.
И так, сначала создаем переменную MyDate, в которой будет хранить дату пользователя, далее создаем вторую переменную MyHours в которой будем хранить часы, в переменной elements мы храним, полученный элемент индефикатора time, который взаимодействует с блочным элементом div из первой части файла index.php. В переменную name мы записываем имя, к примеру Виктория, в общем, все что находится между блочным элементом div.
Далее создаем конструкцию switch - case в которой будем через условие, выводить часовой диапазон изменения времени суток и соответственно, выводить время суток в блочном элементе div, прибавляя еще и имя. По умолчанию, если вдруг так произойдет, что по не понятным причинам все условия будут false, то мы выводим текст Здравствуйте.
var MyDate = new Date,
MyHours = MyDate.getHours(),
elements = document.getElementById('time'),
name = elements.innerHTML;
switch (true){
case (MyHours >= 5) && (MyHours < 11):elements.innerHTML = 'Доброе утро, ' + name;
break;
case (MyHours >= 11) && (MyHours < 16):elements.innerHTML = 'Добрый день, ' + name;
break;
case (MyHours >= 16) && (MyHours <= 23):elements.innerHTML = 'Добрый вечер, ' + name;
break;
case (MyHours >= 0) && (MyHours < 5):elements.innerHTML = 'Доброй ночи, ' + name;
break;
default:elements.innerHTML = 'Здравствуйте, ' + name;
break;
}
В принципе, надеюсь, я все доступно Вам объяснил. Если у кого то возникли какие-либо вопросы, оставляйте свои комментарии и я постараюсь на них ответить. Давным давно писал урок на тему разработка системы управления сайтом, можно в принципе там будет реализовать данную идею в третьей части, которая выйдет в скором будущем, может через месяц. На этом у меня все. Всего доброго, удачи в реализации!