五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果

更新時(shí)間：2020年03月25日 11:02:47 作者：SXT明輝

這篇文章主要為大家詳細(xì)介紹了五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

學(xué)了一段時(shí)間的HTML、CSS和JS后，給大家做一款漂亮的不像實(shí)力派的HTML時(shí)鐘，先看圖：

涉及到的知識(shí)點(diǎn)有： CSS3動(dòng)畫(huà)、DOM操作、定時(shí)器、圓點(diǎn)坐標(biāo)的計(jì)算（好多人是不是已經(jīng)還給自己的老師了~）
接下來(lái)，我們用5步來(lái)制作它

step1、準(zhǔn)備HTML

首先，我們需要準(zhǔn)備HTML結(jié)構(gòu)，背景、表盤(pán)、指針（時(shí)針、分針、秒針）、數(shù)字。

<div id="clock">
 <div class="bg">
 <div class="point">
 <div id="hour"></div>
 <div id="minute"></div>
 <div id="second"></div>
 <div class="circle"></div>
 </div>
 </div>
< /div>

step2、準(zhǔn)備CSS

定義好指針的顏色和大小，需要說(shuō)明的是transform: rotate(-90deg); 用來(lái)旋轉(zhuǎn)指針，transform-origin:0 6px; 用來(lái)設(shè)置旋轉(zhuǎn)中心點(diǎn)。

<style>
 *{
 margin: 0;
 padding: 0;
 }
 #clock{
 margin: 5% auto;
 width: 400px;
 height: 400px;
 border-radius: 10px;
 background: #aaa;
 position: relative;
 transform: rotate(-90deg);
 }
 #clock .bg{
 width: 360px;
 height: 360px;
 border-radius: 50%;
 background: #fff;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -180px;
 margin-top: -180px;
 }
 #clock .point{
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -14px;
 margin-top: -14px;
 }
 #clock #hour{
 width: 80px;
 height: 16px;
 background: #000;
 margin: 6px 0 0 14px;
 /*transform: rotate(30deg);*/
 transform-origin:0 8px;
 /*animation: hour 3s linear 100!* alternate*!;*/
 border-radius: 16px;
 }

 #clock #minute{
 width: 120px;
 height: 12px;
 background: #000;
 margin: -14px 0 0 14px;
 transform-origin:0 6px;
 border-radius: 12px;
 }
 #clock #second{
 width: 160px;
 height: 6px;
 background: #f00;
 margin: -9px 0 0 14px;
 transform-origin:0 3px;
 border-radius: 6px;
 }
 #clock .point .circle{
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: #000;
 position: absolute;
 left: 0;
 top: 0;
 }
 @keyframes hour {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
 }

 #clock .number{
 position: absolute;
 font-size: 34px;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 transform: rotate(90deg);
 }
< /style>

step3、計(jì)算時(shí)針位置

JS通過(guò)Date對(duì)象獲取當(dāng)前時(shí)間，getHours獲取小時(shí)、getMinutes獲取分鐘、getSeconds獲取秒。時(shí)針轉(zhuǎn)動(dòng)一周是12格，每格角度就是360°/12，分鐘和秒都是60格，每格角度360°/60。

function clock(){
 var date = new Date();//獲取當(dāng)前時(shí)間
 //時(shí)(0-23) 分(0-59)秒(0-59)
 //計(jì)算轉(zhuǎn)動(dòng)角度
 var hourDeg = date.getHours()*360/12;
 var minuteDeg = date.getMinutes()*360/60;
 var secondDeg = date.getSeconds()*360/60;
 //console.log(hourDeg, minuteDeg, secondDeg);
 //設(shè)置指針
 hour.style.transform = 'rotate('+hourDeg+'deg)';
 minute.style.transform = 'rotate('+minuteDeg+'deg)';
 second.style.transform = 'rotate('+secondDeg+'deg)';
}

step4、時(shí)鐘轉(zhuǎn)動(dòng)

通過(guò)setInterval設(shè)置定時(shí)器，每秒刷新一次。注意，需要初始化執(zhí)行一次，否則會(huì)在1s后才能看到效果。

//初始化執(zhí)行一次
clock();
setInterval(clock,1000);

step5、繪制數(shù)字時(shí)間

數(shù)字時(shí)間也是在一個(gè)圓周上，我們只用確定好半徑，然后得到半徑上的坐標(biāo)。通過(guò)左邊來(lái)定位每個(gè)數(shù)字就好了?？匆幌聢A坐標(biāo)系的計(jì)算規(guī)則：

* 圓半徑坐標(biāo)計(jì)算：
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意，我們計(jì)算的坐標(biāo)是圓弧上點(diǎn)的坐標(biāo)，當(dāng)定位每個(gè)數(shù)字時(shí)，都是以元素的左上角點(diǎn)進(jìn)行定位，這樣我們的數(shù)字就會(huì)存在偏移。也就是說(shuō)數(shù)字的中心點(diǎn)不在圓弧上，解決辦法就是把坐標(biāo)點(diǎn)(x,y)平移自身的一半(x-w/2, y-h/2)
，這樣數(shù)字的中心點(diǎn)就在圓弧上了。

var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
 var deg = Math.PI*2/12;//360°
 for (var i = 1; i <= 12; i++) {
 //計(jì)算每格的角度
 var angle = deg*i;
 //計(jì)算圓上的坐標(biāo)
 var x = pointX + r*Math.cos(angle);
 var y = pointY + r*Math.sin(angle);
 //創(chuàng)建div,寫(xiě)入數(shù)字
 var number = document.createElement('div');
 number.className = 'number';
 number.innerHTML = i;
 //減去自身的一半, 讓div的中心點(diǎn)在圓弧上
 number.style.left = x - 25 + 'px';
 number.style.top = y - 25 + 'px';
 //添加到頁(yè)面
 myClock.appendChild(number);
 }
}

完整JS代碼：

<script>
 /***
 * 時(shí)鐘:
 * 1> 旋轉(zhuǎn): rotate(90deg)
 * 2> 旋轉(zhuǎn)中心點(diǎn): transform-origin
 * */
 //TODO step1: 獲取時(shí)鐘的指針
 var hour = document.getElementById('hour');//時(shí)針
 var minute = document.getElementById('minute');//分針
 var second = document.getElementById('second');//秒針
 var myClock = document.getElementById('clock');//時(shí)鐘

 //TODO step2: 獲取當(dāng)前時(shí)間,把指針?lè)旁谡_的位置
 function clock(){
 var date = new Date();//獲取當(dāng)前時(shí)間
 //時(shí)(0-23) 分(0-59)秒(0-59)
 //計(jì)算轉(zhuǎn)動(dòng)角度
 var hourDeg = date.getHours()*360/12;
 var minuteDeg = date.getMinutes()*360/60;
 var secondDeg = date.getSeconds()*360/60;
 //console.log(hourDeg, minuteDeg, secondDeg);
 //設(shè)置指針
 hour.style.transform = 'rotate('+hourDeg+'deg)';
 minute.style.transform = 'rotate('+minuteDeg+'deg)';
 second.style.transform = 'rotate('+secondDeg+'deg)';
 }
 //初始化執(zhí)行一次
 clock();
 //TODO step3: 設(shè)置定時(shí)器
 setInterval(clock,1000);

 /***
 * 圓半徑坐標(biāo)計(jì)算：
 * x = pointX + r*cos(angle);
 * y = pointY + r*sin(angle);
 * */
 var pointX = 200;
 var pointY = 200;
 var r = 150;
 //TODO step4: 畫(huà)時(shí)鐘數(shù)字
 function drawNumber(){
 var deg = Math.PI*2/12;//360°
 for (var i = 1; i <= 12; i++) {
 //計(jì)算每格的角度
 var angle = deg*i;
 //計(jì)算圓上的坐標(biāo)
 var x = pointX + r*Math.cos(angle);
 var y = pointY + r*Math.sin(angle);
 //創(chuàng)建div,寫(xiě)入數(shù)字
 var number = document.createElement('div');
 number.className = 'number';
 number.innerHTML = i;
 //減去自身的一半, 讓div的中心點(diǎn)在圓弧上
 number.style.left = x - 25 + 'px';
 number.style.top = y - 25 + 'px';
 //添加到頁(yè)面
 myClock.appendChild(number);
 }
 }
 drawNumber();
< /script>

怎么樣，會(huì)了嗎？

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: