<style>
my-clock {
width: 200px;
height: 200px;
border: 10px solid olive;
background: lightgray;
border-radius: 50%;
box-shadow: 0 0 8px black;
display: grid;
place-items: center;
position: relative;
--ww: 200px;
--num_ww: 26px;
--rr: calc((var(--ww) - var(--num_ww)) / 2);
}
my-clock::before, my-clock::after { position: absolute; content: ''; }
my-clock::before {
width: 16px;
height: 16px;
border-radius: 50%;
background: olive;
}
my-clock::after { content: 'HUA CHAO'; top: 65%; color: rgba(0,0,0,.5); }
hand-pointer, kedu-num, kedu-sec { position: absolute; display: block; }
kedu-number {
position: absolute;
width: var(--num_ww);
height: var(--num_ww);
font: normal 20px / var(--num_ww) Arial, sans-serif;
text-shadow: 1px 1px 2px black;
text-align: center;
color: snow;
left: calc(var(--rr) + var(--rr) * var(--cos));
top: calc(var(--rr) + var(--rr) * var(--sin));
--cos: cos(var(--deg));
--sin: sin(var(--deg));
}
kedu-sec { width: 8px; height: 4px; background: olive; }
hand-pointer {
transform-origin: 50% 100%;
background: linear-gradient(snow,olive);
width: var(--hand_ww);
height: calc(var(--ww) / 2 - var(--hand_hh));
top: var(--hand_hh);
animation: rot var(--duration) var(--delay) infinite linear;
}
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<my-clock id="clock"></my-clock>
<script>
let kedu_ar = [270,300,330,0,30,60,90,120,150,180,210,240], hand_ar = [[6,40,43200],[4,30,3600],[2,6,60]];
let now = new Date();
let secs = -1 * now.getSeconds(), mins = -60 * now.getMinutes(), hrs = -3600 * (now.getHours() % 12) + mins;
let tt_ar = [hrs, mins, secs];
kedu_ar.forEach((item,key) => {
let ele = document.createElement('kedu-number');
ele.innerText = key > 0 ? key : 12;
ele.style.setProperty('--deg', kedu_ar[key] + 'deg');
clock.appendChild(ele);
});
Array.from({length: 60}).forEach((item,key) => {
let ele = document.createElement('kedu-sec');
ele.style.transform = `rotate(${6 * key}deg) translate(${clock.offsetWidth / 2 - 10}px)`;
if(key % 5 === 0) ele.style.background = 'linear-gradient(to right,snow 50%,olive 0)';
clock.appendChild(ele);
});
hand_ar.forEach((item,key) => {
item.push(tt_ar[key]);
let properties = [['--hand_ww','px'],['--hand_hh','px'],['--duration','s'],['--delay','s']];
let ele = document.createElement('hand-pointer');
ele.style.zIndex = key + 1;
properties.forEach((item1,key1) => ele.style.setProperty(properties[key1][0], hand_ar[key][key1] + properties[key1][1]));
clock.appendChild(ele);
});
</script>