Вы узнаете как вывести текущее время и обновлять его с некоторой периодичностью
Вывести часы и минуты на javascript
Для начала напишем HTML:
<div class="clock-block"> <span id="timeman-block" class="timeman-block"> <span class="bx-time" id="timeman-timer"> <span class="time-hours">11</span><span class="time-semicolon">:</span><span class="time-minutes">58</span> </span> </span> </div>
Добавим немного стилей:
.time-hours {
display: inline-block;
height: 33px;
vertical-align: top;
}
.time-semicolon {
display: inline-block;
height: 33px;
vertical-align: top;
}
.time-minutes {
display: inline-block;
height: 33px;
vertical-align: top;
}
.bx-time {
display: inline-block;
font-size: 28px;
font-family: "OpenSans-Light",sans-serif;
height: 33px;
line-height: 29px;
position: relative;
vertical-align: middle;
z-index: 5;
}
.black .bx-time {
color: #777;
transition: all 0.3s;
}
На первое время хватит :). Для вывода текущих часов и минут воспользуемся PHP:
<div class="clock-block">
<span id="timeman-block" class="timeman-block">
<span class="bx-time" id="timeman-timer">
<span class="time-hours"><?=date('H'/*,strtotime('-1 hours')*/)?></span><span class="time-semicolon">:</span><span class="time-minutes"><?=date('i')?></span>
</span>
</span>
</div>
Обратите внимание на комментарий, таким образом можно настроить поправку на время для часов. Ну и напоследок напишем функцию обновления:
// update time
setInterval(function() {
var current_date = new Date;
var cur_hour = ('0'+current_date.getHours()).slice(-2);
$('.time-hours').text(cur_hour);
}, 60000);
setInterval(function() {
var current_date = new Date;
var cur_min = ('0'+current_date.getMinutes()).slice(-2);
if (cur_min != $('.time-minutes').text())
$('.time-minutes').text(cur_min);
if (cur_min == '00') {
var current_date2 = new Date;
var cur_hour = ('0'+current_date2.getHours()).slice(-2);
$('.time-hours').text(cur_hour);
}
}, 5000);
Обратите внимание, что для минут выбрана погрешность 5 секунд (или 5000 миллисекунд), мне кажется нет смысла делать точность прям до секунды. Для часов выбрана погрешность 60 секунд, но вы конечно можете для своих скриптов изменить как вам будет удобнее, это всего-лишь пример.
Получили такой результат:
