Цвет времени суток
Речь шла о том, чтобы фон часиков зависел от времени суток. В полдень фон имеет "максимальную", то есть, заданную массивом 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 [1232 просмотра]