12.demo 刻度时钟演示图代码部分（思路在注释里）--------------------------------

演示图

刻度时钟 -original-original.gif
代码部分（思路在注释里）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css" id="sty">
            /* 重置默认样式 */
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            /* 时钟容器样式 */
            #clock{
                width: 200px;
                height: 200px;
                border: 3px solid #000;
                border-radius: 50%;
                margin: 20px auto;
                position: relative;
            }
            /* 时钟中心点样式 */
            #con{
                width: 10px;
                height: 10px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                left: 95px;
                top: 95px;
            }
            /* 时钟时针样式 */
            #hour{
                width: 3px;
                height: 60px;
                background: rgb(0, 0, 0);
                position: absolute;
                left: 98px;
                top: 35px;
                transform-origin: center 65px;
            }
            /* 时钟分针样式 */
            #min{
                width: 2px;
                height: 70px;
                background: #000;
                position: absolute;
                left: 98.5px;
                top: 13px;
                transform-origin: center 80px;
            }
            /* 时钟秒针样式 */
            #sec{
                width: 1px;
                height: 100px;
                background: rgb(0, 0, 0);
                position: absolute;
                left: 98.5px;
                top: 20px;
                transform-origin: center 80px;
            }

			/* 时间显示样式 */
			p {
				font-size:50px;
				font-weight: 600;
			}
            /* 时间显示容器样式 */
            .box{
                margin: 0px 590px;
            }
		</style>
	</head>
	<body>
    <!-- 时钟容器 -->
    <div id="clock">
        <!-- 时钟指针 -->
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <!-- 时钟中心点 -->
        <div id="con"></div>
    </div>

    <!-- 时间显示容器 -->
    <div class="box">
	    <!-- 时间显示 -->
	    <p id="time"></p>
    </div>
	</body>
	<script>
    // 当页面加载完成时执行的函数
    window.onload=function(){
        // 获取DOM元素
        var oclock=document.getElementById('clock');
        var oList=document.getElementById('list');
        
        var oSec=document.getElementById('sec');
        var oMin=document.getElementById('min');
        var oHour=document.getElementById('hour');
        // 更新时钟指针位置的函数
        function time(){
            var date=new Date();
            var s=date.getSeconds();
            var m=date.getMinutes()+(s/60);
            var h=date.getHours()+(m/60);

            // 根据当前时间更新秒、分、时针的旋转角度
            oSec.style.transform='rotate('+s*6+'deg)';
            oMin.style.transform='rotate('+m*6+'deg)';
            oHour.style.transform='rotate('+h*30+'deg)';
        }
        // 首次调用，设置初始时钟指针位置
        time();

        // 定时器，每秒更新一次时钟指针位置
        setInterval(time,1000);
    }

		// 获取并显示当前时间的函数
		var getTime = function() {
			var date = new Date();
			var hour = date.getHours() < 10 ? '0' : date.getHours();
			var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			var time = `${hour}:${min}:${sec}`;
            // 将时间以HTML格式输出到指定元素
			document.getElementById("time").innerHTML = time
		}
		// 定时器，每秒更新一次时间显示
		setInterval(function(){
			getTime()
		}, 1000)
	</script>
</html>