Как сделать часы на javascript (jQuery)

Вы узнаете как вывести текущее время и обновлять его с некоторой периодичностью

Вывести часы и минуты на 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 секунд, но вы конечно можете для своих скриптов изменить как вам будет удобнее, это всего-лишь пример.
Получили такой результат:

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

#SaveUkraine