HTML+CSS+JS制作一個中國風時鐘,特點：這次使用了SVG裡不再插入base64編碼，這樣可以省去大量代碼，并實作了更簡潔美觀的效果。
HTML+CSS+JS制作一個中國風時鐘
1. 效果圖：
2. 特點：這次使用了SVG裡不再插入base64編碼，這樣可以省去大量代碼，并實作了更簡潔美觀的效果。
3. 代碼實作：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content ="width = device-width" />
<meta name="author" content="戈小戈">
<title>時鐘</title>
</head>
<body>
<div style="position: relative;width: 200px;border-radius: 50%;background-color: #fff;z-index: -99;">
<svg id="中國風鐘表" data-name="中國風鐘表" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs><style>.cls-1{fill:#fdfbed;fill-opacity:0.6;stroke-width:10px;}.cls-1,.cls-11,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke:#f89a07;}.cls-1,.cls-11,.cls-13,.cls-2,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{stroke-miterlimit:10;}.cls-11,.cls-13,.cls-2,.cls-3,.cls-9{fill:none;}.cls-13,.cls-2,.cls-4,.cls-5{stroke-width:4px;}.cls-9{stroke-width:12px;}.cls-3{stroke-linecap:round;stroke-linejoin:round;}.cls-3,.cls-6,.cls-7{stroke-width:2px;}.cls-11{stroke-width:8px;}.cls-4{font-size:49px;}.cls-10,.cls-4,.cls-5,.cls-6,.cls-7{fill:#f89a07;}.cls-4,.cls-5,.cls-6,.cls-7{font-family:SimSun;}.cls-5{font-size:50px;}.cls-6{font-size:35px;}.cls-7{font-size:40px;}.cls-8{fill:#db7d00;}.cls-9{stroke:#db7d00;}.cls-12{fill:#ff2929;}.cls-13{stroke:#ff2929;}.cls-14{fill:#fff;z-index: 99999;}</style></defs>
<title>中國風鐘表</title>
<g id="clock-dial"><circle id="clock-dial-inset" class="cls-1" cx="500" cy="500" r="450"/><circle id="clock-dial-outside" class="cls-2" cx="500" cy="500" r="470"/><g id="雲"><g id="left-up"><path class="cls-3" d="M169.89,166.45H101.5A6.51,6.51,0,0,0,95,173.12h0a6.27,6.27,0,0,0,6.28,6.13h19.65a5.78,5.78,0,0,1,5.77,5.92h0a5.85,5.85,0,0,1-5.87,5.7l-46.32-.21A13.36,13.36,0,0,0,61.09,204h0A11.33,11.33,0,0,0,72.4,215.35l148.4.27"/></g><g id="left-down"><path class="cls-3" d="M155.7,787.34h-69a5.85,5.85,0,0,0-5.86,6v.8a6.19,6.19,0,0,0,6.14,6h19.71A5.75,5.75,0,0,1,112.5,806a6.08,6.08,0,0,1-6.14,5.79l-46-.2A13.35,13.35,0,0,0,46.9,824.9h0a11.34,11.34,0,0,0,11.32,11.33l148.39.27"/></g><g id="right-mid"><path class="cls-3" d="M919.59,204.75H957a3.91,3.91,0,0,1,3.92,4v.54a4.1,4.1,0,0,1-4.07,4h-9.47a3.85,3.85,0,0,0-3.92,3.88,4,4,0,0,0,4.08,3.86l24.67-.13c4.08,0,7.4,4,7.4,8.91h0c0,4.17-2.79,7.56-6.24,7.56l-81.77.18"/></g><g id="right-up"><path class="cls-3" d="M796.46,107.25h65.35c3.78,0,6.83,2.16,6.76,4.78l0,1c-.07,2.55-3.08,4.6-6.77,4.6h-17c-3.79,0-6.84,2.15-6.76,4.78h0c.08,2.56,3.1,4.6,6.8,4.58l43.43-.16c7.12,0,12.91,4.81,12.91,10.78h0c0,5.05-4.87,9.14-10.89,9.15l-133.45.2c-5.19,0-9.39,2.92-9.4,6.52v.83c0,4.4,5.15,8,11.5,8l40.83,0"/></g><g id="right-down"><path class="cls-3" d="M902.71,740.88H837.35c-3.78,0-6.83,2.19-6.76,4.87l0,1c.07,2.6,3.07,4.69,6.76,4.69h17c3.79,0,6.84,2.2,6.76,4.88h0c-.08,2.62-3.1,4.7-6.8,4.69l-43.43-.17c-7.12,0-12.91,4.91-12.91,11h0c0,5.16,4.87,9.34,10.89,9.35l133.45.2c5.19,0,9.4,3,9.41,6.66v.85c0,4.5-5.14,8.14-11.5,8.14l-36.83,0h-8l-61.91-.1"/></g></g>
<g id="Twelve-Hours" data-name="Twelve-Hours"><text class="cls-5" transform="translate(697.44 150.68)">1</text><text class="cls-5" transform="translate(851.53 305.22)">2</text><text class="cls-5" transform="translate(912.67 518.99)">3</text><text class="cls-5" transform="translate(850.76 725.37)">4</text><text class="cls-5" transform="translate(696.67 879.15)">5</text><text class="cls-5" transform="translate(487.91 935.55)">6</text><text class="cls-5" transform="translate(282.38 878.3)">7</text><text class="cls-5" transform="translate(121.48 723.6)">8</text><text class="cls-5" transform="translate(62.1 516.22)">9</text><text class="cls-5" transform="translate(117.38 307.7)">10</text><text class="cls-5" transform="translate(270.8 158.02)">11</text><text class="cls-4" transform="translate(475.47 99.69)">12</text></g>
<g id="Twelve-Double-Hour"><text class="cls-7" transform="translate(480.47 153.96)">子</text><text class="cls-7" transform="translate(806.15 321.3)">醜</text><text class="cls-7" transform="translate(807.98 701.16)">寅</text><text class="cls-7" transform="translate(480.11 870.74)">卯</text><text class="cls-7" transform="translate(165.76 694.63)">辰</text><text class="cls-7" transform="translate(169.78 327.47)">巳</text><text class="cls-6" transform="translate(482.04 210.37)">午</text><text class="cls-6" transform="translate(765 346.26)">未</text><text class="cls-6" transform="translate(767.24 675.59)">申</text><text class="cls-6" transform="translate(483.42 815.53)">酉</text><text class="cls-6" transform="translate(217.6 665.53)">戌</text><text class="cls-6" transform="translate(210.45 348.9)">亥</text></g></g>
</svg>
<svg class="s" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.s {position: absolute;left:0px;width: 100%;z-index: 9999;}</style></defs><g id="秒針"><path class="cls-12" d="M505,550a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V210a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/><path class="cls-13" d="M505,550a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V210a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/></g></svg>
<svg class="m" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.m {position: absolute;left:0px;width: 100%;z-index: 999;}</style></defs><g id="分針"><path class="cls-10" d="M505,550a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V260a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/><path class="cls-11" d="M505,550a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V260a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/></g></svg>
<svg class="h" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.h {position: absolute;left:0px;width: 100%;z-index: 99;}</style></defs><g id="時針"><path class="cls-8" d="M505,551a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V311a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/><path class="cls-9" d="M505,551a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V311a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5Z"/></g></svg>
<svg class="clockshaft" data-name="clockshaft" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.clockshaft{position: absolute;left:0px;width: 100%;z-index: 99999;}</style></defs><circle id="core" class="cls-14" cx="500" cy="500" r="17.5"/></svg>
</div>
<script>
// autor:戈小戈
function setTime() {
const sHand = document.querySelector('.s');
const mHand = document.querySelector('.m');
const hHand = document.querySelector('.h');
const d = new Date();
const ms = d.getMilliseconds();//毫秒
const s = d.getSeconds();//秒
const m = d.getMinutes();//分
const h = d.getHours();//時
const sDeg = (( s / 60 ) * 360 ) + (( ms / 1000 ) * 6 );
const mDeg = (( m / 60 ) * 360 ) + (( s / 60 ) * 6 );
const hDeg = (( h / 12 ) * 360 ) + (( m / 60 ) * 6 );
sHand.style.transform = 'rotate('+sDeg+'deg )';
mHand.style.transform = 'rotate('+mDeg+'deg )';
hHand.style.transform = 'rotate('+hDeg+'deg )';
const doubleHour = document.getElementById("Twelve-Double-Hour").getElementsByTagName("text")[parseInt(h/2)];
const hour = document.getElementById("Twelve-Hours").getElementsByTagName("text")[h%12-1];
doubleHour.style.fill="#ff2929";doubleHour.style.stroke="#ff2929";
hour.style.fill="#ff2929";hour.style.stroke="#ff2929";
}
setInterval( setTime, 10 );
</script>
</body>
</html>