Цифровые светодиодные часы на JavaScript

Пусть эти маленькие часы напоминают об отсчёте текущего времени, в которое я весьма занят, но скоро, надеюсь, будет посвободнее.

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

Размеры канвы нетрудно подобрать "вручную" исходя из получающихся размеров цифр. Конечно, можно бы было создавать канву нужной ширины и высоты динамически, скрипт нетрудно модифицировать в этом направлении.

Вот скрипт в работе, а под катом - исходник без обрамления HTML, предполагается, что он будет сохранён в файл .html кодировки Юникода UTF-8.

<div style="margin: 0 auto; text-align: center;">
<canvas id="digitalClock" style="background-color: black;" width="700" height="160">
 <!-- Подберите размеры канвы по своим часам -->
</canvas>
 
</div>
<script>
function digitalClock(id,color1,color2,scale,typedate) {
 let canvas = document.getElementById(id);
 let g = canvas.getContext("2d");
 g.textAlign = 'center';
 g.textBaseline='top';
 let masks = [ // какие полоски закрашиваем для каждой цифры
  "1110111", "0010010", "1011101", "1011011", "0111010",
  "1101011", "1101111", "1010010", "1111111", "1111011"
 ];
 
 let vertices = [ // горизонтальное и вертикальное расположения
  [ [0, 0], [1, 1], [7, 1], [8, 0], [7, -1], [1, -1] ],
  [ [0, 0], [-1, 1], [-1, 7], [0, 8], [1, 7], [1, 1] ]
 ];        
 
 function Led(x, y, idx, ox, oy) {
  this.x = x;
  this.y = y; //начало
  this.idx = idx; //расположение
  this.offset_x = ox;
  this.offset_y = oy; //промежутки между полосками
 }
 
 let leds = []; //создаем и позиционируем полоски
 leds.push(new Led(0, 0, 0, 0, -1));
 leds.push(new Led(0, 0, 1, -1, 0));
 leds.push(new Led(8, 0, 1, 1, 0));
 leds.push(new Led(0, 8, 0, 0, 1));
 leds.push(new Led(0, 8, 1, -1, 2));
 leds.push(new Led(8, 8, 1, 1, 2));
 leds.push(new Led(0, 16, 0, 0, 3));
 
 function drawDigitalClock(color1, color2, size, typedate) {
  let clockWidth = (6 * 15 + 2 * 10 - 5) * size;
  let clockHeight = 20 * size;
  let dateFont = Math.max(8,Math.floor(clockHeight/6));
  g.font = dateFont+'px monospace';
  let x = (canvas.width - clockWidth) / 2;
  let y = (canvas.height - clockHeight) / 2;
  g.clearRect(0, 0, canvas.width, canvas.height);
  let date = new Date();
  let segments = [date.getHours(), date.getMinutes(), date.getSeconds()];
  segments.forEach( function (value, index) {
   x = drawDigits(x, y, size, value);
   if (index < 2) x = drawSeparator(x, y, size);
  });
  if (typedate) {
   g.fillStyle = color1;
   let d = strDate();
   g.fillText(d, canvas.width/2, canvas.height-dateFont-4);
  }
 }
 
 function drawDigits (x, y, size, timeUnit) {
  let digit1 = Math.floor(timeUnit / 10);
  let digit2 = timeUnit % 10;
  x = drawLeds(x, y, size, masks[digit1]);
  x = drawLeds(x, y, size, masks[digit2]);
  return x;
 }
 
 function drawSeparator (x, y, size) {
  g.fillStyle = color1;
  g.fillRect(x + 0.5 * size, y + 3 * size, 2 * size, 2 * size);
  g.fillRect(x + 0.5 * size, y + 10 * size, 2 * size, 2 * size);
  return x + size * 10;
 }
 
 function drawLeds (x, y, size, mask) {
  leds.forEach(
   function (led, i) {
    g.fillStyle = mask[i] == '1' ? color1 : color2;
    let xx = x + led.x * size + led.offset_x;
    let yy = y + led.y * size + led.offset_y;
    drawLed(xx, yy, size, vertices[led.idx]);
   }
  );
  return x + size * 15;
 }
 
 function drawLed(x, y, size, vertices) {
  g.beginPath();
  g.moveTo(x, y);
  vertices.forEach(function (vertex) {
   g.lineTo(x + vertex[0] * size, y + vertex[1] * size);
  });
  g.closePath();
  g.fill();
 }
 
 function strDate () { //дата в формате "Чт, 31 декабря 2020"
  function pad2 (i) { return String("0" + i).slice(-2); }
  let dt = new Date();
  let monthes = [ 'января','февраля','марта','апреля','мая','июня',
   'июля','августа','сентября','октября','ноября','декабря' ];
  let weekdays = [ 'Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб' ]; 
  return weekdays[dt.getDay()]+', '+pad2(dt.getDate())+' '+
   monthes[dt.getMonth()]+' '+dt.getFullYear();
 }
 
 drawDigitalClock (color1, color2, scale, typedate);
 setInterval(drawDigitalClock, 1000, color1, color2, scale, typedate);
}
 
window.addEventListener ('load', function (e) {
 digitalClock('digitalClock',"#11ff11","#112211",6,true);
  //аргументы: id канвы, цвет активных полосок, цвет неактивных полосок, 
  //масштаб (от 1 и выше), выводить ли дату
}); 
</script>
<noscript>
 <div style="margin: 0 auto; text-align: center;">
  Включите в браузере JavaScript для работы приложения!
 </div>
</noscript>

Сделать часы "во весь экран" тоже несложно.

Например, для вывода больших часов добавим в тегу <body> стиль

<body style="margin:0;overflow: hidden;">

, в функции digitalClock изменим размеры канвы на максимальный:

function digitalClock(id,color1,color2,scale,typedate) {
 let canvas = document.getElementById(id);
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 //...

и увеличим размер часиков, скажем, так

digitalClock('digitalClock',"#11ff11","#112211",9,true);

 Открыть а текущей вкладке полноэкранную версию цифровых светодиодных часов на Javascript (5 Кб)

15.01.2020, 11:47 [2481 просмотр]