CSS智能手表

.watch{
  --watch-color: white;
  --screen-color: black;  
  font-size: 4.5vmin;
  font-family: monospace;
  color: #fff;
  padding: 2em 1.5em;
  border: 2px solid var(--watch-color);
  border-radius: 2em;
  box-shadow:
    inset 0 0 0 .5em black,
    inset 0 0 1rem 1em hsl(0 0% 100% / .25);
  background-color: var(--screen-color);
  background-image: linear-gradient(to bottom right, #fff0 50%, hsl(0 0% 100% / .25));
  position: relative;
}
.watch::before, .watch::after{
  content: "";
  position: absolute;
  background-color: var(--watch-color);
  z-index: -1;
}
.watch::after{
  inset: -.5em 20%;
  border-radius: .5em;
  background-image: 
    linear-gradient(#fff0, hsl(0 0% 0% / .5) .5em calc(100% - .5em), #fff0);
}
.watch::before{
  inset: -50vh 25%;
  background-image: 
    repeating-linear-gradient(#fff0 0 .3em, hsl(0 0% 0% / .125) .3em .5em, #fff0 .5em .8em),
    radial-gradient(circle, #fff0, hsl(0 0% 0% / .25) 50%);
}
.keyword  { color: #ddca7e; }
.def      { color: #809bbd; }
.operator { color: #cccccc; }
.property { color: #9a8297; }
.string   { color: #96b38a; }
.number   { color: #d0782a; }
* { box-sizing: border-box; }
body { 
  margin: 0;
  padding: 1em;
  min-height: 100vh;
  background-color: #1d1e22;
  display: grid;
  place-items: center;
  overflow: hidden;
}

clock();

function clock(){
  const date = new Date();
  const indent = 2;
  const clockObj = {
    am_pm: date.getHours() >= 12 ? 'pm' : 'am' ,
    hours: date.getHours() % 12 || 12,
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
    day: date.toLocaleDateString('en-us', {weekday:'long'}),
    date: date.getDate(),
    month: date.toLocaleDateString('en-us', {month:'long'}),
    year: date.getFullYear(),
  }
  const valFormat = (val) => {
    if(typeof val == 'number') return `<span class="value number">${val}</span>`
    else if (typeof val == 'string') return `<span class="value string">"${val}"</span>`
  }
  document.querySelector(".watch").innerHTML = 
    `<span class="keyword">const</span> <span class="def">clock</span> <span class="operator">=</span> {<br>` 
    + Object.entries(clockObj).reduce((str, [key, val])=> str + `${'&nbsp'.repeat(indent)}<span class="property">${key}</span>: ${valFormat(val)},<br>`, '') 
    + '};';
  requestAnimationFrame(clock)
}