先看看效果圖吧，如果喜歡這個效果再向下看吧，以免浪費各位的寶貴時間。
效果圖：
下面介紹一下我的思路。其實很簡單：
1、利用border-radius這個展示圓角效果的屬性做出三個長短和粗細均不相同的時鐘指針。同時爲了讓三個指針的展示有裏外的層次感，三個指針雖然均是使用的紅色，但是紅色的深淺不同，這樣看起來就稍微有層次感，以免三個指針看起來融到一起去了。
2、利用定時函數setInterval不斷的繪製三個指針的角度，從而達到指針旋轉的效果。當然，指針的旋轉還得用到一個style屬性transform。利用該屬性的兩個參數rotate和translateX(或者translateY)就可以讓一個元素繞着相對於該元素中心的位置以translateX(或者translateY)爲半徑旋轉rotate角度。
3、整個錶盤是由三部分組成的。最底層藍紫色的原型底盤。然後在該底盤上面覆蓋了一個小一圈的淺藍色圓盤作爲時鐘的內部背景。最後利用內部背景循環創建了12個時鐘刻度。這樣的效果就是淺藍色的錶盤外面套了一個藍紫色爲背景的刻度盤。
4、爲了讓三個指針顯得不是那麼突兀，在時鐘的正中心畫了一個比時針稍寬的一個與秒針同色的小圓，同時用了一個很小的灰白色小圓位於秒針之上，這樣能夠達到有個灰白色的小釘固定秒針並帶動其旋轉的效果。
想要查看效果其實很簡單，將下面代碼拷貝到一個文本文檔中，然後將文件的後綴由txt改成html，然後右鍵打開方式選擇瀏覽器打開就可以了。由於部分屬性是較新版的瀏覽器纔會支持的，所以只要不是老古董的瀏覽器都是能看到效果的。
好了，喜歡的朋友拿去好好改改吧，配色不是特別好，稍微優化一下或許會更加好看。
當初寫這個時鐘的原因就是偶然的情況下看到了transform這個屬性，感覺挺好玩的，於是就寫了這麼個時鐘玩玩，現在分享給大家，希望各位能夠喜歡。
詳細代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時鐘</title>
<style>
#circle{
left: 80px;
top: 80px;
position: absolute;
background-color: #6A5ACD;
border-radius: 100%;
height: 480px;
width: 480px;
}
#clock{
left: 40px;
top: 40px;
position: absolute;
background-color: #00BFFF;
border-radius: 100%;
height: 400px;
width: 400px;
}
#secondPointer{
width: 200px;
height: 10px;
left: 100px;
top: 195px;
position: absolute;
background-color: #CD3700;
float: right;
color: #CD3700;
border-radius: 10px 100% 100% 10px;
}
#minutePointer{
width: 150px;
height: 14px;
left: 125px;
top: 193px;
position: absolute;
background-color: #CD4F39;
float: right;
color: #CD4F39;
border-radius: 14px 100% 100% 14px;
}
#hourPointer{
width: 100px;
height: 20px;
left: 150px;
top: 190px;
position: absolute;
background-color: #CD5B45;
float: right;
color: #CD5B45;
border-radius: 20px 100% 100% 20px;
}
#bigCircle{
width: 28px;
height: 28px;
left: 186px;
top: 186px;
position: absolute;
background-color: #CD3700;
float: right;
color: #CD3700;
border-radius: 100%;
}
#smallCircle{
width: 8px;
height: 8px;
left: 196px;
top: 196px;
position: absolute;
background-color: #C0C0C0;
float: right;
color: #C0C0C0;
border-radius: 100%;
}
.hourScale{
width: 40px;
height: 40px;
left: 180px;
top: 180px;
font-size: 30px;
position: absolute;
float: right;
color: #E8E8E8;
}
#numberTime{
margin-left: 50px;
font-size:36px;
}
</style>
</head>
<body>
<div id="numberTime">
現在時間是北京時間：
<span id="numberHour"></span>
<span id="numberMinute"></span>
<span id="numberSecond"></span>
</div>
<div id="circle">
<div id="clock">
<div id="hourPointer" style="display: none;"> </div>
<div id="minutePointer" style="display: none;"> </div>
<div id="secondPointer" style="display: none;"> </div>
<div id="bigCircle"> </div>
<div id="smallCircle"> </div>
</div>
</div>
</body>
<script>
let clock = document.getElementById("clock");
let secondPointer = document.getElementById("secondPointer");
let minutePointer = document.getElementById("minutePointer");
let hourPointer = document.getElementById("hourPointer");
let numberHour = document.getElementById("numberHour");
let numberMinute = document.getElementById("numberMinute");
let numberSecond = document.getElementById("numberSecond");
// 初始化時鐘的刻度
let initHourScale = function(){
for(let i=1; i<=12; i++){
let span = document.createElement("span");
if(i<10){
span.innerHTML = " "+i+" ";
} else {
span.innerHTML = i;
}
//span.innerHTML = i;
span.classList.add("hourScale");
span.style.transform="rotate("+ (30*i)%360+"deg) translateY("+(-220)+"px)";
clock.appendChild(span);
}
};
initHourScale();
//以兩位數顯示數字
let showNumberWithTwo = function(num){
if(num<10){
return "0"+num;
} else {
return num;
}
}
setInterval(function(){
let currentTime = new Date();
showNow( currentTime );
},1000);
let showNow = function( date ){
let second = date.getSeconds();
let minute = date.getMinutes();
let hour = date.getHours();
console.log("second:" + second);
console.log("minute:" + minute);
console.log("hour:" + hour);
//顯示北京時間
numberHour.innerHTML=showNumberWithTwo(hour)+" :";
numberMinute.innerHTML=showNumberWithTwo(minute)+" :";
numberSecond.innerHTML=showNumberWithTwo(second);
//顯示時鐘指針
secondPointer.style.transform="rotate("+ (6*second-90)%360+"deg) translateX("+100+"px)";
secondPointer.style.display="block";
minutePointer.style.transform="rotate("+ (6*minute-90+second/10)%360+"deg) translateX("+75+"px)";
minutePointer.style.display="block";
hourPointer.style.transform="rotate("+ (30*hour-90+minute/2)%360+"deg) translateX("+50+"px)";
hourPointer.style.display="block";
};
</script>
</html>