<div class="date">3</div>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
.date {font-size: 3rem; font-family: 'Noto Sans KR', sans-serif;}
function getDate() {
const week = new Array('SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY');
const today = new Date();
const dayName = week[today.getDay()];
const hours = today.getHours() % 12 ? today.getHours() % 12 : 12;
const minutes = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes();
const ampm = today.getHours() >= 12 ? 'PM' : 'AM';
const date = `${dayName} ${hours}:${minutes} ${ampm}`;
return date;
}
const update = () => {
document.querySelector('.date').innerHTML = getDate();
requestAnimationFrame(update);
};
update();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.