Часы на 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);
};

В этой реализации часы будут запускаться после загрузки страницы, для этого скрипт обернут в функцию 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);
};

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

: :

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

45 188

Комментарии не найдены