БлогNot. Цвет времени суток

Цвет времени суток

Речь шла о том, чтобы фон часиков зависел от времени суток. В полдень фон имеет "максимальную", то есть, заданную массивом noon интенсивность цвета, в полночь - "минимальную", определённую в массиве midnight. Текущие дата и время выводятся обратным (инвертированным) цветом, см. функцию rgbs_invert.

Вот заготовка такого кода в работе:

Требуется JavaScript для работы приложения...

Ниже показан исходник приложения (без обрамляющих тегов HTML в кодировке Юникода UTF-8):

<div id="rgbtime" style="width: 400px;">Требуется JavaScript для работы приложения...</div>
<script>
 function rgbTime (id) {

  function strDateTime() { //дата и время в формате "Чт, 31 декабря 2020, 21:35:00"
   let dt = new Date();
   let monthes = [ 'января','февраля','марта','апреля','мая','июня',
    'июля','августа','сентября','октября','ноября','декабря' ];
   let weekdays = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
   function pad2 (i) { return String('0' + i).slice(-2); }
   return weekdays[dt.getDay()]+', '+dt.getDate()+' '+
    monthes[dt.getMonth()]+' '+dt.getFullYear()+
    ', '+pad2(dt.getHours())+':'+pad2(dt.getMinutes())+':'+pad2(dt.getSeconds());
  }

  function rgbs (r0=0,g0=0,b0=0) { //строка вида "rgb(r,g,b)"
   let r = Math.max(0,Math.min(r0,255)), 
       g = Math.max(0,Math.min(g0,255)), 
       b = Math.max(0,Math.min(b0,255));
   return 'rgb('+r+','+g+','+b+')';
  }

  function rgbs_invert (r0=0,g0=0,b0=0) { //обратный цвет к "rgb(r,g,b)"
   let r = 255-Math.max(0,Math.min(r0,255)), 
       g = 255-Math.max(0,Math.min(g0,255)), 
       b = 255-Math.max(0,Math.min(b0,255));
   return 'rgb('+r+','+g+','+b+')';
  }

  function getColor (m,n) { //цвет между полночью m и полуднем n
   let d = new Date(),
    sec = d.getHours()*60*60 + d.getMinutes()*60 + d.getSeconds(), //0-86399 сек.
    x = (sec > 43199 ? 86400 - sec : sec), //0-43199 сек.
    r = Math.round(m[0]+x*(n[0]-m[0])/43199.),
    g = Math.round(m[1]+x*(n[1]-m[1])/43199.),
    b = Math.round(m[2]+x*(n[2]-m[2])/43199.);
   return [r,g,b];
  }

  let midnight = [0, 30, 61], //r,g,b полуночи
      noon = [155, 191, 128], //r,g,b полудня
      rgb = getColor (midnight, noon);
  let elem = document.getElementById(id);
  elem.style.color = rgbs_invert(rgb[0],rgb[1],rgb[2]);
  elem.style.backgroundColor = rgbs(rgb[0],rgb[1],rgb[2]);
  elem.innerHTML = strDateTime();
 }

 window.addEventListener ('load', function (e) {
  rgbTime ('rgbtime');
  setInterval (rgbTime, 1000, 'rgbtime');
 });
</script>

Здесь использована самая примитивная инверсия цвета, другие варианты функции rgbs_invert можно взять в этой заметке.

17.08.2020, 22:58 [1142 просмотра]


теги: программирование javascript цвет время

К этой статье пока нет комментариев, Ваш будет первым