БлогNot. Ленточные часы

Ленточные часы

В начале минувшего года мне пришла в голову куча разных часов - раз, два, три, четыре.

Сейчас что-то новых идей нет, а часики вышли лишь чуть менее безумными, чем по первой из ссылок, так что видно, какой будет год :)

Исходник (без обрамления HTML, кодировка Юникода UTF-8) приведён далее.

 <style>
  .ribbonTable {
   margin: auto;
   font-family: monospace;
   border-spacing: 4px;
  }
  .ribbonTableTr {
  }
  .ribbonTableTd {
   text-align: center;
   vertical-align: middle;
   border: 1px solid #000033;
   padding: 4px;
   background: #f0f0ff;
   border-radius: 8px;
  }
 </style>

 <div id="ribbonClockDiv"></div>

 <script>
  function ribbonClock (N,M,id) {
   let tableDiv = document.getElementById (id);
   let tbl = document.createElement ('table');
   tbl.classList.add ('ribbonTable');
   let tbdy = document.createElement('tbody');
   for (let i = 1; i <= N; i++) {
    let tr = document.createElement('tr'), td;
    tr.classList.add ('ribbonTableTr');
    for (let j = 1; j <= M; j++) {
     td = document.createElement('td');
     td.setAttribute ('id', 'c_'+i+'_'+j);
     td.classList.add ('ribbonTableTd');
     tr.appendChild(td);
    }
    tbdy.appendChild(tr);
   }
   tbl.appendChild(tbdy);
   tableDiv.appendChild (tbl);

   function isLeapYear (y) { return (((y%4==0) && (y%100!=0) || (y%400==0)) ? true : false); }

   function pad2 (i) { return String("0" + i).slice(-2); }

   function getDaysInMonth (m,y) {
    let mondays = [31,28,31,30,31,30,31,31,30,31,30,31];
    if (isLeapYear (y) == true) mondays[1]=29;
    return (mondays[m]);
   }

   function now () {
    let date = new Date();
    let hour=date.getHours();
    let minute=date.getMinutes();
    let sec=date.getSeconds();
    let day=date.getDate();
    let month=date.getMonth(); //0-11
    let year=date.getFullYear();
    let weekday=date.getDay();//0-6, с Вс
    if (weekday == 0) weekday = 7;//1-7, с Пн
    let daysInMonth = getDaysInMonth(month,year);
    return [hour, minute, sec, day, month, year, daysInMonth, weekday];
   }

   function next_value(min,max,steps,i) {
    //от min до max включительно значение номер i из steps шагов, можно min>max
    if (steps<=1) { if (i<1) return min; else return max; }
    let step = Math.abs(max-min)/(steps-1);
    if (min == max) return min;
    if (i<0) i=0; else if (i>=steps) i=steps-1;
    let val = 0;
    if (min<max) val = min+i*step;
    else val = min-i*step;
    if (val<Math.min(min,max)) val = Math.min(min,max); 
    else if (val>Math.max(min,max)) val = Math.max(min,max); 
    return Math.round(val);
   }

   function getWeekNumber (d0) {
    let d = new Date(Date.UTC(d0.getFullYear(), d0.getMonth(), d0.getDate()));
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
    let yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    let weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
    return weekNo;
   }
   
   function innerClock() { //отрисовка
    let d = now(), sec = d[2], seck = sec;
    let color1 = '#FF0000', color2 = '#0000FF';
    let r1 = parseInt(color1.substring(1,3), 16),
        g1 = parseInt(color1.substring(3,5), 16),
        b1 = parseInt(color1.substring(5,7), 16),
        r2 = parseInt(color2.substring(1,3), 16),
        g2 = parseInt(color2.substring(3,5), 16),
        b2 = parseInt(color2.substring(5,7), 16);
    for (let j = 1; j <= M; j++) { //полоса секунд
     let cell = document.getElementById ('c_3_'+j);
     cell.innerHTML = pad2(seck);
     let r = pad2 (next_value(r1,r2,M,j-1).toString(16));
     let g = pad2 (next_value(g1,g2,M,j-1).toString(16));
     let b = pad2 (next_value(b1,b2,M,j-1).toString(16));
     cell.style.color = '#'+r+g+b;
     if (seck < 59) seck++; else seck = 0;
    }
    let h = pad2(d[0]), m = pad2(d[1]), ss = pad2(sec);
    document.getElementById ('c_2_1').innerHTML = h.substring(0,1); //часы, минуты, секунды
    document.getElementById ('c_2_2').innerHTML = h.substring(1,2);
    document.getElementById ('c_2_3').innerHTML = ':';
    document.getElementById ('c_2_4').innerHTML = m.substring(0,1);
    document.getElementById ('c_2_5').innerHTML = m.substring(1,2);
    document.getElementById ('c_2_6').innerHTML = ':';
    document.getElementById ('c_2_7').innerHTML = ss.substring(0,1);
    document.getElementById ('c_2_8').innerHTML = ss.substring(1,2);
    let wds = ['', 'Пн','Вт','Ср','Чт','Пт','Сб','Вс'], wd = d[7];
    for (let j = 1; j <= 7; j++) { //дни недели
     let wdcell = document.getElementById ('c_2_'+(j+8));
     wdcell.innerHTML = (j == wd ? wds[wd] : '');
     wdcell.style.color = (wd < 6 ? '#00F' : '#F00');
     wdcell.style.backgroundColor = (j < 6 ? '#DDF': '#FDD');
    }
    document.getElementById ('c_2_16').innerHTML = pad2(getWeekNumber(new Date()));
    document.getElementById ('c_2_16').style.backgroundColor = '#DFD';
    document.getElementById ('c_2_17').innerHTML = 'н.'; //номер недели ISO
    document.getElementById ('c_2_17').style.backgroundColor = '#DFD';
    let mon = d[4];
    for (let j = 1; j <= 12; j++) { //месяц
     let wdcell = document.getElementById ('c_2_'+(j+17));
     wdcell.innerHTML = (j-1 == mon ? pad2(j) : '');
     wdcell.style.backgroundColor = (j-1 == mon ? '#FDD': '#DDD');
    }
    document.getElementById ('c_2_30').innerHTML = pad2(Math.floor(d[5]/100)); //столетие
    document.getElementById ('c_2_30').style.backgroundColor = '#FDD';
    document.getElementById ('c_2_31').innerHTML = pad2(d[5]%100); //год
    document.getElementById ('c_2_31').style.backgroundColor = '#FDD';
    let day = d[3];
    for (let j = 1; j <= d[6]; j++) { //день
     let wdcell = document.getElementById ('c_1_'+j);
     wdcell.innerHTML = (j == day ? pad2(j) : '');
     wdcell.style.backgroundColor = (j == day ? '#FDD': '#DDD');
    }
   }

   innerClock ();
   setInterval (innerClock,1000);
  } //ribbonClock

  window.addEventListener ('load', function (e) {
   ribbonClock (3, 31, 'ribbonClockDiv');
  } );
 </script>
 <noscript>
  <p style="text-align: center;">Включите Javascript в браузере для работы приложения!</p>
 </noscript>

Наверное, понятно, в какой строке какая информация выводится.

  • Строка 1: день месяца;
  • строка 2: время ЧЧ:ММ:СС, день недели, номер недели по ISO, номер месяца, год;
  • строка 3: просто бегущая линейка цветных секунд :)

01.01.2021, 21:34 [1198 просмотров]


теги: javascript цвет дата время

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