演示：http://blog.mazzz.cc/h5/shoubiao.html
源代码
<head>
<meta charset="UTF-8" />
<title>
手表
</title>
<style>
.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 0.5em black,
inset 0 0 1rem 1em hsl(0 0% 100% / 0.25); background-color: var(--screen-color);
background-image: linear-gradient( to bottom right, #fff0 50%, hsl(0 0%
100% / 0.25) ); position: relative; } .watch::before, .watch::after { content:
''; position: absolute; background-color: var(--watch-color); z-index:
-1; } .watch::after { inset: -0.5em 20%; border-radius: 0.5em; background-image:
linear-gradient( #fff0, hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em), #fff0
); } .watch::before { inset: -50vh 25%; background-image: repeating-linear-gradient(
#fff0 0 0.3em, hsl(0 0% 0% / 0.125) 0.3em 0.5em, #fff0 0.5em 0.8em ), radial-gradient(circle,
#fff0, hsl(0 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; }
</style>
</head>
<body>
<div class="watch">
</div>
<script>
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 entryFormat = ([key, val]) = >{
return`$ {
' '.repeat(indent)
} < span class = "property" > $ {
key
} < /span>: ${valFormat(val)}`; }; const valFormat = (val) => { if (typeof val == 'number') return `<span class="number">${val}</span > `;
else if (typeof val == 'string') return` < span class = "string" > "${val}" < /span>`; }; document.querySelector('.watch').innerHTML = ` <span class="keyword">const</span > <span class = "def" > clock < /span> = {<br> ${Object.entries(clockObj).reduce( (str, entry) => str + entryFormat(entry) + ',<br>', '' )}};`; requestAnimationFrame(clock); } /
</script>
</body>