用JavaScript编写钟表

Love The Way You Lie 2022-05-20 02:54 230阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>  
\#clock\{  
width: 500px;  
height: 500px;  
border: 5px solid gray;  
margin: 0 auto;  
position: relative;  
background: black;  
border-radius: 50%;  
box-shadow: 0 0 15px black;  
\}  
.scale\{  
width: 30px;  
height: 30px;  
position: absolute;  
left: calc(50% - 15px);  
top: 30px;  
color: white;  
transform-origin: 15px 220px;  
  
  
  
  
\}  
.scale span\{  
display: block;  
text-shadow: 0 5px 20px lightgray;  
width: 100%;  
height: 100%;  
text-align: center;  
line-height: 30px;  
font-size: 20px;  
/\*background: red;\*/  
  
\}  
\#hour\{  
width: 8px;  
height: 100px;  
position: absolute;  
background: white;  
left: calc(50% - 4px);  
top: 150px; /\*将所有表针底部定位在表盘中心\*/  
transform-origin: center bottom;  
border-radius: 40% 40% 0% 0%;  
\}  
\#minute\{  
width: 6px;  
height: 180px;  
position: absolute;  
background: white;  
left: calc(50% - 3px);  
top: 70px;  
transform-origin: center bottom;  
border-radius: 40% 40% 0% 0%;  
  
  
\}  
\#second\{  
width: 4px;  
height: 200px;  
position: absolute;  
background: white;  
left: calc(50% - 2px);  
top: 50px;  
transform-origin: center bottom;  
border-radius: 40% 40% 0% 0%;  
  
  
\}  
\#spike\{  
width: 20px;  
height: 20px;  
border-radius: 50%;  
background: lightgray;  
position: absolute;  
left: calc(50% - 10px);  
top: calc(50% - 10px);  
\}  
.key\{  
width: 2px;  
height: 15px;  
border:1px solid white;  
position: absolute;  
top: 0;  
left: calc(50% - 1px);  
background: white;  
transform-origin: 2px 249px;  
\}  
.long\{  
width: 3px;  
height: 25px;  
\}  
</style>  
</head>  
<body>  
<div id="clock">  
<div class="scale"><span>12</span></div>  
<div class="scale"><span>1</span></div>  
<div class="scale"><span>2</span></div>  
<div class="scale"><span>3</span></div>  
<div class="scale"><span>4</span></div>  
<div class="scale"><span>5</span></div>  
<div class="scale"><span>6</span></div>  
<div class="scale"><span>7</span></div>  
<div class="scale"><span>8</span></div>  
<div class="scale"><span>9</span></div>  
<div class="scale"><span>10</span></div>  
<div class="scale"><span>11</span></div>  
  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key long"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
<div class="key"></div>  
  
<div id="hour"></div>  
<div id="minute"></div>  
<div id="second"></div>  
  
<div id="spike"></div>  
</div>  
</body>  
<script>  
var scales = document.querySelectorAll(".scale");  
var sps = document.querySelectorAll(".scale span");  
var keys = document.querySelectorAll(".key");  
//初始化表盘  
for(var i = 0 ; i < scales.length ; i++)\{  
// 12个刻度共360deg，那么每个客服需要旋转30deg  
scales\[i\].style.transform = "rotate("+i\*30+"deg)";  
// 父级元素发生旋转，自己元素也会随之发生旋转，所以刻度显示数字会发生角度秦谢，需要将每一个div中的span逆时针旋转相同的角度吧数值摆正  
sps\[i\].style.transform = "rotate("+(-i\*30)+"deg)";  
\}  
for(var i = 0 ; i < keys.length ; i ++)\{  
keys\[i\].style.transform = "rotate("+i\*6+"deg)";  
console.log(keys\[i\]);  
\}  
// 获取当前时间并将时间转化为对应的角度  
function initTime()\{  
var date = new Date();  
console.log(date);  
  
  
var sNum = date.getSeconds();  
sDeg = sNum\*6;  
second.style.transform = "rotate("+sDeg+"deg)";  
  
// 将分钟转化为角度，1m = 6deg  
  
var mNum = date.getMinutes();  
mDeg = mNum\*6 + sNum\*6/60;  
minute.style.transform = "rotate("+mDeg+"deg)";  
  
  
// 将小时转化为角度  
// 1h对应的角度是360/12=30deg  
var hNum = date.getHours();  
console.log(hNum);  
hNum = hNum >12 ? hNum - 12 : hNum;  
hDeg =hNum\*30 + mNum\*30/60;  
console.log(hDeg);  
// 将对应角度显示在表盘上  
hour.style.transform  = "rotate("+hDeg+"deg)";  
\}  
setInterval(initTime,1000);   
</script>  
</html>