Часы являются одним из простых скриптов, но, одновременно с тем, и наиболее часто используемым для сайта. На его основе можно сделать различные таймеры, а также анимацию, зависящую от времени. Сегодня я расскажу, как сделать часы на 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);
};
В этой реализации часы будут запускаться после загрузки страницы, для этого скрипт обернут в функцию onload. Далее используется функция setInterval(), принимающая два параметра: интервал в одну секунду и анонимную функцию, которая будет получать текущие время и выводить его в блок с id=clock.
Всё часы готовы!
Второй способ – часы на сайте: «часы, минуты и секунды отдельно»
Во втором варианте скрипта, все элементы часов вытягиваются по отдельности, а именно часы, минуты и секунды. Так же как и в первом скрипте, нужно создать блок, в котором будет выводиться время в этом случае с id=clock_2.
<div id="clock"></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, id=clockMinutes, id=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);
};
Всё часы готовы!
:
:
В заключение к этой статьи я хочу добавить, что часы можно сделать достаточно оригинальными и интересными, если потратить на это чуть больше времени, хотя сама логика скрипта достаточна проста.