Показать Меню
falbar Часы на Javascript

Часы на Javascript

Часы на Javascript

Часы являются одним из простых скриптов, но, одновременно с тем, и наиболее часто используемым для сайта. На его основе можно сделать различные таймеры, а также анимацию, зависящую от времени. Сегодня я расскажу, как сделать часы на javascript двумя способами.

Первый способ - метод toLocaleTimeString

Для написания первого скрипта нам понадобится HTML заготовка, с которой и будем работать:

<div id="clock"></div>

Укажем ей следующие свойства:

#clock{
	color: #0071D0;
	font-weight: bold;
	font-size: 20px;
}

Теперь можно писать сам код. Основан он будет на использовании метода toLocaleTimeString объекта Date. Этот метод выводит полное время в формате, установленном у пользователя на его ОС. Порой, это бывает очень удобно, а главное этот вариант самый короткий.

window.onload = function(){
	window.setInterval(function(){
		var now = new Date();
		var clock = document.getElementById('clock');
		clock.innerHTML = now.toLocaleTimeString();
	}, 1000);
}

В этой реализации часы будут запускаться после загрузки страницы, для этого скрипт обернут в функцию window.onload. Далее используется функция setInterval, принимающая два параметра: интервал в одну секунду и анонимную функцию, которая будет получать текущие время и выводить его в блок с id clock.

Всё часы готовы!

Второй способ – часы на сайте: «часы, минуты и секунды отдельно»

Во втором варианте скрипта, все элементы часов вытягиваются по отдельности, а именно часы, минуты и секунды. Так же как и в первом скрипте, нужно создать блок, в котором будет выводиться время в этом случае с id clock_2.

<div id="clock_2"></div>

Указываем ему отличные свойства от первого скрипта:

#clock_2{
	color: red;
	font-weight: bold;
	font-size: 20px;
}

Весь код помещается в функцию, которая будет вызвана после элемента с id clock_2. Внутри её идёт взаимодействие с объектом Date, а именно: получения через его методы часы, минуты и секунды. Этот способ удобен тем, что мы можем сами контролировать формат выхода времени часов на сайте. Для этого в примере есть проверка, которая дописывает недостающие нули в записи от времени. Далее формируется строка, и при помощи свойства innerHTML происходит вывод времени на странице в блок с id clock_2. В конце функции запускается обычный таймер, который через каждую секунды вызывает эту же функцию.

function clock_2(){

	var date = new Date();
	var hours = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();

	if (hours < 10) 
		hours = '0' + hours;
	if (minutes < 10) 
		minutes = '0' + minutes;
	if (seconds < 10) 
		seconds = '0' + seconds;

	var str = hours + ':' + minutes + ':' + seconds;

	document.getElementById('clock_2').innerHTML = str;
	setTimeout('clock_2()', 1000);
};

Всё часы готовы!

Разноцветные часы на javascript

Выше были показаны стандартные способы вывода часов на сайте. Конечно, всё это можно усложнить и сделать чуть-чуть интереснее, например: каждую секунду менять цвет часов, минут и секунд. Ниже как раз описан такой алгоритм, но для его реализации необходимо добавить три элемента span (с id: clockHours, clockMinutes, clockSeconds).

// Получаем случайное число
function getRandom(number){
	return Math.round(number * Math.random());
};

// Генерируем цвет
function getRandomColor(){

	var red = getRandom(255);
	var green = getRandom(255);
	var blue = getRandom(255);

	var color = "rgb(" + red + "," + green + "," + blue + ")";

	return color;
};

function clock_3(){

    var date 	= new Date();
    var hours 	= date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    var clockHours 	 = document.getElementById('clockHours');
    var clockMinutes = document.getElementById('clockMinutes');
    var clockSeconds = document.getElementById('clockSeconds');

	if (hours < 10) 
		hours = '0' + hours;
	if (minutes < 10) 
		minutes = '0' + minutes;
	if (seconds < 10) 
		seconds = '0' + seconds;
	
	clockHours.innerHTML 	= hours;
	clockMinutes.innerHTML 	= minutes;
	clockSeconds.innerHTML 	= seconds;
	
	clockHours.style.color = getRandomColor();
	clockMinutes.style.color = getRandomColor();
	clockSeconds.style.color = getRandomColor();

	setTimeout("clock_3()", 1000);
};

Всё часы готовы!

: :

В заключение к этой статьи я хочу добавить, что часы можно сделать достаточно оригинальными и интересными, если потратить на это чуть больше времени, хотя сама логика скрипта достаточна проста.

Подписаться на обновления

Комментариев еще не оставлено