Часы

Создаем цифровые часы на JavaScript

Из этого руководства вы узнаете, как с помощью JavaScript создать цифровые часы, показывающие время в 24 и 12-часовом форматах.

Цифровые часы в 24- часовом формате

Структура

Создадим элемент div с атрибутом id = “clock” , в котором будет отображаться время с помощью JavaScript.

Стили

Для текста можно установить размер шрифта и цвет. В качестве шрифта выберем Orbitron . Время будет отображаться на черном фоне.

/* Google font */ @import url(‘https://fonts.googleapis.com/css?family=Orbitron’); body < background-color: #121212; >#clock

Скрипт

Весь код часов основан на функции currentTime() . Внутри функции создается объект класса Date , который используется для получения текущего часа, минут и секунд. Их значения сохраняются в разных переменных.

Чтобы элементы времени всегда отображались в двузначном формате, перед ними ставится 0 всякий раз, когда они меньше 10. Для этого используется метод updateTime() .

function currentTime() < hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); >function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >>

Теперь отобразим текущее время в элементе div . Для этого используется метод document.getElementById и свойство innerHTML .

document.getElementById("clock").innerHTML = hour + " : " + min + " : " + sec; /* adding time to the div */

Чтобы запустить таймер, применим метод setTimeout() . В качестве аргументов он принимает функцию currentTime() в качестве первого аргумента и временя (в миллисекундах). В нашем случае функция вызывается каждые 1000 миллисекунд.

Наконец, функция currentTime() вызывается для запуска всего процесса.

function currentTime() < var t = setTimeout(function()< currentTime() >, 1000); /* настаиваем таймер */ > currentTime(); /* Вызываем функция currentTime(), которая запускает весь процесс*/

Мы только что создали цифровые часы.

Цифровые часы в 12-часовом формате

Для часов с 12-часовым форматом времени HTML и CSS остаются такими же, как и в предыдущем случае.

Структура

Создаем блок div для отображения времени.

Стиль

Стиль часов тоже не меняется.

/* Google font */ @import url(‘https://fonts.googleapis.com/css?family=Orbitron’); body < background-color: #121212; >#clock

Скрипт

JavaScript-код для цифровых часов показан ниже.

function currentTime() < var date = new Date(); /* создаем объект класса Date() */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */ var t = setTimeout(function()< currentTime() >, 1000); /* настраиваем таймер */ > function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >> currentTime(); /* вызываем функцию currentTime() */

Нам необходимо добавить еще три строки кода и наши часы будут готовы. Создаем переменную и присваиваем ей начальное значение «AM». Эта переменная будет использоваться для хранения значения «AM» или «PM». Для присвоения переменной midday значения «PM» используется тернарный оператор.

function currentTime() < var midday = "AM"; midday = (hour >= 12) ? "PM" : "AM"; >

Чтобы отображать время в 12-часовом формате, количество часов не должно превышать двенадцать. Поэтому если оно больше, то 12 вычитается из количества часов. Кроме этого, количество часов меняется на 12.

function currentTime() < hour = (hour == 0) ? 12 : ((hour >12) ? (hour - 12): hour); >

Источник

Аналоговые часы на HTML5 c логикой на JavaScript

Когда изучаешь новую технологию или язык программирования, основные понятия всегда носят относительно рутинный характер и поэтому, на мой взгляд, быстро отбивают желание обучаться у начинающих. Цель данной статьи — это заинтересовать и увлечь читателя изучением программирования на примере разработки элементарной графики в динамическом режиме. Статья подойдет для начинающих разработчиков, которые ознакомились с основами HTML5 и JavaScript , и которым наскучило видеть статический текст на страничке при выводе в консоль браузера массивов, объектов, результатов арифметических операций и т.д. Далее мы реализуем простейшую, но полезную для понимания языка анимацию.

Что мы будем делать?

Рассмотрим процесс создание простейших аналоговых часов средствами HTML5 и JavaScript. Рисовать часы будем графическими примитивами, не используя средств CSS . Мы вспомним немного геометрии для отображения нашей графики, вспомним немного математики для реализации логики отображения наших анимированных часов. И в целом постараемся уменьшить энтропию в познаниях языка JavaScript. Для разработки нам понадобится текстовый редактор вроде Notepad++ или Sublime Text 3.

Реализация цифровых часов

Создадим три файла в текстовом редакторе. (Все три файла должны лежать в одной папке).

index.html — основная страничка
clockscript.js — скрипт с логикой работы
style.css — файл стилей

Для начала выведем текущее время в обычный div-блок в .html файл. Даже в такой маленькой задаче есть свой подводный камень. Если просто закинуть функцию отображения часов в событие onload у тега body, то текущее время отобразится в строке, но так и останется статическим. И div-блок, в который мы отправили строку с текущим временем, не будет самостоятельно обновляться.

Добиться самостоятельного обновления элемента страницы можно оборачиванием функции отображения времени в анонимный метод, который присваивается свойству onload корневого объекта Window .

Один из вариантов реализации может быть следующим. Файл index.html:

      Черновик по JavaScript. Работа с холстом: 
Тут будет текущее время
  

window.onload = function() < window.setInterval( function()< var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString(); >, 1000); > 

Разберемся с работой clockscript.js:

Выполняем внутренний JavaScript-код при помощи привязки к событию onload корневого объекта Window :

Метод объекта объекта Window , который выполняет код через определенные промежутки времени (указанные в миллисекундах):

window.setInterval(function() , 1000); 

Объект Date используется для проведения различных манипуляций с датой и временем. С помощью конструктора создаем его экземпляр и называем d:

Находим объект DOM по его id. Это именно тот объект, в который мы хотим выводить наше время. Это может быть параграф, заголовок или еще какой-то элемент. У меня это div-блок. После получения элемента по id, используем его свойство innerHTML для получение всего содержимого элемента вместе с разметкой внутри. И передаем туда результат метода toLocaleTimeString(), который возвращает форматированное представление времени:

document.getElementById("clock").innerHTML = d.toLocaleTimeString(); 

Вот, что должно получиться(время динамически изменяется каждую секунду):

Реализация аналоговых часов

С этого момента мы будем использовать Canvas (HTML), который будет служить нам холстом для творчества.

Чтобы увидеть наш холст в файле index.html внутри body мы должны где-то расположить следующий тег, сразу определив его размеры:

Теперь в файле clockscript.js, прежде чем пытаться рисовать, нужно получить контекст объекта Canvas . Сделаем это в начале нашей функции отображения часов. Тогда файл clockscript.js изменится следующим образом:

function displayCanvas() < var canvasHTML = document.getElementById('myCanvas'); var contextHTML = canvasHTML.getContext('2d'); contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height); //Тут будет вся логика часов и код отображения через графические примитивы return; >window.onload = function() < window.setInterval( function()< var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString(); displayCanvas(); >, 1000); > 

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

Угол поворота всех стрелок за 1 секунду:

• Секундная стрелка повернется на угол — (1/60)*360 o = 6 o
• Минутная стрелка повернется на угол — (1/60)*6 o = 0,1 o
• Часовая стрелка повернется на угол — (1/60)*0,1 o ≈ 0,0017 o

То есть даже за 1 секунду все стрелки должны повернуться, каждая на соответствующий угол. И если это не учесть, то первый подводный камень, который мы получим в отображении, будет некрасивая анимация. К примеру, когда время будет 19:30, то часовая стрелка будет ровно показывать на 19 часов, хотя в реальной жизни она должна уже быть наполовину приближена к 20 часам. Аналогично, приятнее будет выглядеть плавное передвижение минутной стрелки. Ну а секундная стрелка пусть перещелкивается дискретными движениями, как в большинстве реальных механических часов. Решение проблемы: прибавлять к углы поворота текущей стрелки угол поворота более быстрой стрелки, домноженный на коэффициент, обозначающий его долю от угла текущей стрелки.

var t_sec = 6*d.getSeconds(); //Определяем угол для секунд var t_min = 6*(d.getMinutes() + (1/60)*d.getSeconds()); //Определяем угол для минут var t_hour = 30*(d.getHours() + (1/60)*d.getMinutes()); //Определяем угол для часов 

Угол вращающегося радиус-вектора(стрелки часов) отсчитывается от положительного направления в направлении против часовой стрелки. Если мы это не учтем в нашей логике, то направим часы назад в прошлое.

И еще, отсчет часов, минут и секунд у нас происходит от цифры 12, верхнего положения. Решение проблемы: в наших формулах мы должны учесть это в качестве сдвига +π/2 (90 o ). А перед значением угла ставить знак «-«, чтобы часы шли именно по часовой стрелке. И, конечно, учитывать, что передача угла в градусах в тригонометрические функции языков программирования осуществляется с умножением на коэффициент «π/180 o «.

Реализация на примере секундной стрелки:

contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - t_sec*(Math.PI/180)), yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - t_sec*(Math.PI/180))); 

В ходе разметки рисочек циферблата нужно как-то выделить рисочки напротив часов. Всего рисочек — 60 для секунд и минут. 12 — для часов. Эти 12 должны как-то выделяться на фоне всех остальных. Также симметричность оцифровки зависит от ширины цифр. Очевидно, что цифры 10, 11 и 12 шире, чем 1, 2, 3 и т.д. Про это нужно не забыть.

Решение проблемы и вариант оцифровки циферблата:

for(var th = 1; th else < contextHTML.strokeText(th, xText - 15 , yText + 10); >contextHTML.stroke(); contextHTML.closePath(); > 

С учетом всего этого, мой вариант исполнения кода логики и отображения аналоговых часов выглядит следующим образом:

function displayCanvas()< var canvasHTML = document.getElementById('myCanvas'); var contextHTML = canvasHTML.getContext('2d'); contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height); //Расчет координат центра и радиуса часов var radiusClock = canvasHTML.width/2 - 10; var xCenterClock = canvasHTML.width/2; var yCenterClock = canvasHTML.height/2; //Очистка экрана. contextHTML.fillStyle = "#ffffff"; contextHTML.fillRect(0,0,canvasHTML.width,canvasHTML.height); //Рисуем контур часов contextHTML.strokeStyle = "#000000"; contextHTML.lineWidth = 1; contextHTML.beginPath(); contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2*Math.PI, true); contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.stroke(); contextHTML.closePath(); //Рисуем рисочки часов var radiusNum = radiusClock - 10; //Радиус расположения рисочек var radiusPoint; for(var tm = 0; tm < 60; tm++)< contextHTML.beginPath(); if(tm % 5 == 0)else //для выделения часовых рисочек var xPointM = xCenterClock + radiusNum * Math.cos(-6*tm*(Math.PI/180) + Math.PI/2); var yPointM = yCenterClock - radiusNum * Math.sin(-6*tm*(Math.PI/180) + Math.PI/2); contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2*Math.PI, true); contextHTML.stroke(); contextHTML.closePath(); > //Оцифровка циферблата часов for(var th = 1; th else < contextHTML.strokeText(th, xText - 15 , yText + 10); >contextHTML.stroke(); contextHTML.closePath(); > //Рисуем стрелки var lengthSeconds = radiusNum - 10; var lengthMinutes = radiusNum - 15; var lengthHour = lengthMinutes / 1.5; var d = new Date(); //Получаем экземпляр даты var t_sec = 6*d.getSeconds(); //Определяем угол для секунд var t_min = 6*(d.getMinutes() + (1/60)*d.getSeconds()); //Определяем угол для минут var t_hour = 30*(d.getHours() + (1/60)*d.getMinutes()); //Определяем угол для часов //Рисуем секунды contextHTML.beginPath(); contextHTML.strokeStyle = "#FF0000"; contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - t_sec*(Math.PI/180)), yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - t_sec*(Math.PI/180))); contextHTML.stroke(); contextHTML.closePath(); //Рисуем минуты contextHTML.beginPath(); contextHTML.strokeStyle = "#000000"; contextHTML.lineWidth = 3; contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthMinutes*Math.cos(Math.PI/2 - t_min*(Math.PI/180)), yCenterClock - lengthMinutes*Math.sin(Math.PI/2 - t_min*(Math.PI/180))); contextHTML.stroke(); contextHTML.closePath(); //Рисуем часы contextHTML.beginPath(); contextHTML.lineWidth = 5; contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthHour*Math.cos(Math.PI/2 - t_hour*(Math.PI/180)), yCenterClock - lengthHour*Math.sin(Math.PI/2 - t_hour*(Math.PI/180))); contextHTML.stroke(); contextHTML.closePath(); //Рисуем центр часов contextHTML.beginPath(); contextHTML.strokeStyle = "#000000"; contextHTML.fillStyle = "#ffffff"; contextHTML.lineWidth = 3; contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2*Math.PI, true); contextHTML.stroke(); contextHTML.fill(); contextHTML.closePath(); return; > window.onload = function() < window.setInterval( function()< var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString(); displayCanvas(); >, 1000); > 

Заключение

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

Источник