Часы на сайт

Часы считаются одним из самых популярных скриптов для сайта. На основе этого скрипта можно делать не только таймеры, но и анимацию. Для написания html кода часов для сайта используется 2 метода на JavaScript.

Метод toLocaleTimeString()

Этот способ реализации предусматривает заготовку html шаблона:

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

После этого указываются такие свойства:

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

Теперь можно приступить к написанию html кода для часов на сайт. Для этого используется метод toLocaleTimeString(). Он предназначен для вывода часов в формате, который установлен на операционной системе пользователя. Популярность этого метода обусловлена его удобством и краткостью.

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

Этот способ реализации предусматривает запуск часов сразу же после загрузки сайта. С этой целью используется функция onload. Также потребуется применение функции setInterval(). Она принимает 2 параметра:

односекундный интервал;
анонимную функцию, получающую текущее время и выводящую его в соответствующий блок.

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

Отдельный вывод элементов

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

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

В данном примере указываются такие свойства:

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);
};

Это способ реализации позволяет поместить весь код в функцию, вызывающуюся после блока для вывода часов. Эта функция взаимодействует с объектом Date с целью получения различных элементов часов.

Главным преимуществом данного метода считается удобство. Разработчик самостоятельно контролирует формат времени на часах. С этой целью можно реализовать проверку, которая при необходимости добавит недостающие нули. После этого формируется строка, в которой указывается свойство innerHTML и выполняется вывод времени в заданном блоке. Для корректной работы этого метода в функции вывода реализован стандартный таймер, запускающий ее каждую секунду.

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);
};

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

Веб-разработчикам, которые используют бесплатный html код часов для сайта, доступны не только стандартные способы реализации, но и весьма оригинальные. Примером являются разноцветные часы, которые будут менять цвет каждую секунду. Алгоритм реализации таких часов указан ниже. Стоит заметить, что перед его применением необходимо добавить 3 элемента span с секундами, минутами и часами.

// Получаем случайное число
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);
};