![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
#app{
width:400px;
height: 400px;
border:2px solid black;
margin:0px auto;
border-radius: 100%;
position: relative;
}
.kedu{
position: absolute;
top:0;
/*(400-4)/2*/
left:198px;
width: 4px;
height:20px;
background:black;
transform-origin: 2px 200px;
}
.timeDiv{
position: absolute;
/*(400-寬40）/2*/
left:180px;
/*刻度的高度*/
top:30px;
width: 40px;
height:170px;
/*background: red;*/
transform-origin: bottom;
font-size:25px;
}
/*時針*/
.hour{
position: absolute;
width: 6px;
left:197px;
top:130px;
height: 70px;
background: green;
transform-origin: bottom;
}
/*分針*/
.min{
position: absolute;
width: 4px;
left:198px;
top:100px;
height: 100px;
background: skyblue;
transform-origin: bottom;
}
/*秒針*/
.sec{
position: absolute;
width: 2px;
left:199px;
top:60px;
height: 140px;
background: red;
transform-origin: bottom;
}
.origin{
position:absolute;
width: 20px;
height: 20px;
background: black;
top:190px;
left:190px;
border-radius: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="origin"></div>
</div>
</body>
<script>
var app = document.querySelector("#app");
// 讓時分秒動起來：
var hour = document.querySelector(".hour");
var min = document.querySelector(".min");
var sec = document.querySelector(".sec");
init();
function init(){
// 獲得當前時間
var date = new Date();
var h = date.getHours();// 小時
var m = date.getMinutes();// 分
var s = date.getSeconds();// 秒
// 1- 每小時佔30度
// 2- 每小時共60分鐘
// 由以上兩點可以得出：每分鐘佔用 30/60 = 0.5
// 1-每分鐘佔6度
// 2-每分鐘有60秒
// 由以上兩點可以得出：每秒鐘佔用 6/60=0.1
hour.style.transform = "rotateZ("+(h*30+m*0.5)+"deg)";// 360/12
min.style.transform = "rotateZ("+(m*6+s*0.1)+"deg)";// 360/60
sec.style.transform = "rotateZ("+s*6+"deg)";// 360/60
}
setInterval(init,1000);
// 1- 增加刻度
for(var i=0;i<60;i++){
// 創建div元素
var div = document.createElement("div");
// 爲div增加樣式
div.className = "kedu";
// 旋轉
div.style.transform = "rotateZ("+i*6+"deg)";
// 判斷是否被5整除
if(i%5===0){
div.style.height = "30px"
}
// 將創建的元素div放到app元素的尾部
app.appendChild(div);
}
// 2- 增加時間
for(var i=1;i<=12;i++){
var timeDiv = document.createElement("div");
timeDiv.className = "timeDiv";
timeDiv.style.transform = "rotateZ("+i*30+"deg)"
var numDiv = document.createElement("div");
numDiv.innerHTML = i;
numDiv.style.transform = "rotateZ("+(-i*30)+"deg)";
numDiv.style.textAlign="center";
timeDiv.appendChild(numDiv)
app.appendChild(timeDiv);
}
</script>
</html>
