time

by mizarjp

HTML

<div class="outer" lang="ja">
<div class="inner" lang="ja">
<div id="date" lang="ja"></div>
<div id="time" lang="ja"><span id="h"></span><span class="sep">:</span><span id="m"></span><span class="sep">:</span><span id="s"></span><span class="sep">.</span><span id="n"></span></div>
</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Montserrat:wght@700&family=Noto+Sans+JP:wght@700&display=swap');
* {
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.outer {
  position: relative;
  width: 100vw;
  height: 100vh;
  color: #e0e0ee;
  background-color: #000;
}
.inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#date {
  width: 100vw;
  text-align: center;
  font-weight: 700;
  font-size: 9vw;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
}
#time {
  width: 100vw;
  text-align: center;
  font-weight: 700;
  font-size: 16vw;
  font-family: 'JetBrains Mono', sans-serif;
}
#time .sep {
  font-family: 'Montserrat', sans-serif;
}
#n {
  font-size: 12vw;
}

JavaScript

const date_e = document.getElementById("date");
const time_e = [
  document.getElementById("h"),
  document.getElementById("m"),
  document.getElementById("s"),
  document.getElementById("n"),
];
const fm2 = new Intl.NumberFormat('ja', {
  minimumIntegerDigits: 2, 
  useGrouping: false
});
const fm3 = new Intl.NumberFormat('ja', {
  minimumIntegerDigits: 3, 
  useGrouping: false
});
function step(timestamp) {
  const date = new Date();
  date_e.textContent = [
    date.getFullYear(),
    "-",
    fm2.format(date.getMonth()+1),
    "-",
    fm2.format(date.getDate()),
    "(",
    "\u65e5\u6708\u706b\u6c34\u6728\u91d1\u571f"[date.getDay()],
    ")",
  ].join("");
  [
    fm2.format(date.getHours()),
    fm2.format(date.getMinutes()),
    fm2.format(date.getSeconds()),
    fm3.format(date.getMilliseconds()),
  ].forEach((s, i) => { time_e[i].textContent = s });
  window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);