<style type="text/css">
.numClock {
	margin: auto;
	width: 20em;
	height: 20em;
	background: rgba(240, 248, 255, .6);
	border: 1.2em solid #2f4f4f;
	border-radius: 50%;
	position: relative;
}
.numClock::before {
	content: "CHUACHAO";
	position: absolute;
	width: 100%;
	text-align: center;
	top: 70%;
}
.numBox, .kedu {
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	font-family: 'Microsoft Yahei', Sans-Seri;
	font-size: 1.5em;
	left: calc(50% - 0.75em);
	top: calc(50% - 0.75em);
	background: transparent;
	text-align:center;
}

.numBox span { display: inline-block; }

.kedu {
	width: 0.2em;
	height: 0.2em;
	left: calc(50% - 0.1em);
	top: calc(50% - 0.1em);
	background: rgba(0, 0, 0, .5);
}
.hHand,  .mHand,  .sHand { position: absolute; width: 100%; height: 100%; background: transparent;}

.hr-hand, .min-hand,  .sec-hand {
	position: absolute;
	bottom: 50%;
	transform-origin: 50% 100%;
}

.hr-hand {
	background: #2f4f4f;
	width: 0.4em;
	height: 30%;
	left: calc(50% - 0.2em);
	animation: tRun 43200s linear infinite; 
}

.hr-hand::after {
	content: "";
	position: absolute;
	width: 0; height: 0;
	border: 0.5em solid;
	border-color: transparent transparent #2f4f4f transparent;
	right: -0.3em;
	bottom: 100%;
}

.min-hand {
	background: #2f4f4f;
	width: 0.3em;
	height: 42%;
	left: calc(50% - 0.15em);
	animation: tRun 3600s linear infinite; 
}

.sec-hand {
	background: #d00;
	width: 0.2em;
	height: 48%;
	left: calc(50% - 0.1em);
	border-radius: 60% 60% 20% 20%;
	animation: tRun 60s linear infinite; 
}

.sec-hand::before {
	content: "";
	position: absolute;
	bottom: -0.3em;
	left: -0.3em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: red;
}

@keyframes tRun { to { transform: rotate(1turn);  } }
</style>

<div class="numClock">
	<div class="hHand">
		<div class="hr-hand"></div>
	</div>
	<div class="mHand">
		<div class="min-hand"></div>
	</div>
	<div class="sHand">
		<div class="sec-hand"></div>
	</div>
</div>

<script language="javascript">
var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
	min = now.getMinutes(),
	sec = now.getSeconds(),
	msec = now.getMilliseconds();
var	hDeg = hr * 30 + (min * 6 / 12),
	mDeg = min * 6 + (sec * 6 / 60),
	sDeg = sec * 6 + (msec * 0.36 / 1000);

addNum();
godPush("hHand", hDeg);
godPush("mHand", mDeg);
godPush("sHand", sDeg);

function godPush(ele, deg) {
	document.querySelector("." + ele).style.transform = "rotate(" + deg + "deg)";
}

function addNum() {
	var nStr = "";
	for(j=0; j<60; j++) {
		j%5 == 0 ?
			nStr += "<div class='numBox' style='transform: rotate(" + j*6 + "deg) translateY(-5.8em);'><span style='transform: rotate(-" + j*6 + "deg);'>" + (j == 0 ? "12" : j/5) + "</span></div>" :
			nStr += "<div class='numBox kedu' style='transform: rotate(" + j*6 + "deg) translateY(-6.5em);'></div>";
	}
	document.querySelector(".numClock").innerHTML = nStr + document.querySelector(".numClock").innerHTML;
}
</script>