digital_clock

last update: 2020/12/19
digital_clock (with battery)

exsample font: SF Pro

---

<!doctype html>
<title>digital_clock</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, viewport-fit=cover">

<style>
@font-face {
  font-family: 'SFPro';
  font-weight: 200;
  src: url('./FontsFree-Net-SFProDisplay-Regular.ttf') format('truetype');
}
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #000;
}
#clock {
  display: inline-block;
  margin: 0;
  font-family: 'SFPro';
  font-size: 13vw;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}
</style>

<p id="clock"></p>

<script>
const to2Digits = (num) => {
  let r;
  if (num < 10) {
    r = `0${num}`;
  } else {
    r = num;
  }
  return r;
}
const clock = () => {
const date = new Date();
const hour = to2Digits(date.getHours());
const min  = to2Digits(date.getMinutes());
const time = `${hour}:${min}`;
document.querySelector('#clock').innerHTML = time;
}
setInterval(() => {
  clock();
}, 1000);
</script>

code_popup