|
Сообщение от Сергей Ракипов
|
|
И еще как то можно сделать что бы время всегда было "он лайн"
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
fieldset {
border: 1px solid #4B0082;
display: inline-block;
border-radius: 8px;
padding: 2px 4px;
background-color: #EEE8AA;
}
legend {
color: #9400D3;
font-weight: bold;
border: 1px solid #4B0082;
border-radius: 4px;
background-color: #FFFFFF;
}
fieldset h3 {
margin: 2px auto;
font-weight: normal;
text-align: center;
}
.block {
background-color: #7AFFFF;
padding: 2px 4px;
border-radius: 8px;
margin: 4px auto;
color: #9400D3;
border: 1px solid #4B0082;
}
</style>
</head>
<body>
<div class="reglament"></div>
<script>
const data = [{
title: 'Собрание в Суббота',
begin: {
hh: 20,
mm: 0
},
weekday: 6
}, {
title: 'Собрание в Пятница',
begin: {
hh: 20,
mm: 0
},
weekday: 5
}, {
title: 'Собрание в Суббота',
begin: {
hh: 10,
mm: 0
},
weekday: 6
}];
let oldHtml;
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
});
const nameWeekday = new Intl.DateTimeFormat("ru", {
weekday: "long"
});
function render(obj) {
let {
title,
begin,
status,
long
} = obj;
return `<div class="block">
<div class="title">${title}</div>
<div class="begin">${begin}</div>
<div class="time">
<span class="status">${status}</span>
<span class="long">${long}</span>
</div>
</div>`
}
function renderHtml(time, weekday, arr) {
return `<fieldset>
<legend>
${time}
</legend>
<h3>${weekday}</h3>
${arr.join('')}
</fieldset>`
}
function filter(arr, day) {
return arr.filter(({
weekday
}) => weekday == day);
}
function create(data) {
const timer = () => {
requestAnimationFrame(timer);
let localTime = new Date;
const hourEnd = 21;
//const day = localTime.getDay();
const day = 6//для примера, проверить какие сообщения будут в субботу
let arr = localTime.getHours() < hourEnd ? filter(data, day) : [];
arr = arr.map(obj => {
let {
title,
begin
} = obj;
let {
hh,
mm
} = begin;
let time = new Date;
time.setHours(hh, mm, 0, 0);
begin = `Начало в ${formatter.format(time)}`;
let long = localTime - time;
let status = long < 0 ? (long -= 60000, `Начнется через`) : `Собрание идет`;
long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
long = formatter.format(long);
obj = {
title,
begin,
status,
long
};
return render(obj);
});
let weekday = nameWeekday.format(localTime);
weekday = weekday.slice(0, 1).toUpperCase() + weekday.slice(1);
localTime = formatter.format(localTime);
let html = renderHtml(localTime, weekday, arr);
if (oldHtml == html) return;
document.querySelector(".reglament").innerHTML = oldHtml = html;
};
requestAnimationFrame(timer)
}
create(data)
</script>
</body>
</html>