Ленточные часы
В начале минувшего года мне пришла в голову куча разных часов - раз, два, три, четыре.
Сейчас что-то новых идей нет, а часики вышли лишь чуть менее безумными, чем по первой из ссылок, так что видно, какой будет год :)
Исходник (без обрамления 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 [1266 просмотров]