JavaScript實現(xiàn)時鐘功能

第JavaScript實現(xiàn)時鐘功能本文實例為大家分享了JavaScript實現(xiàn)時鐘功能的具體代碼，供大家參考，具體內(nèi)容如下

1、HTML和CSS部分

1.1HTML部分

1.1.1先放在一個容器中clock，存放用來存放時針、分鐘、秒鐘的容器

divclass="clock"/div

1.1.2用來存放時針、分鐘、秒鐘的容器

div

div/div

/div

1.1.3各個時針、分針、秒鐘的容器

div

div

div/div

div/div

div/div

/div

/div

1.2CSS部分

1.2.1背景、布局

html{

background:#018DEDurl(https://unsplash.it/1500/1000image=881blur=5);

background-size:cover;

font-family:'helveticaneue';

text-align:center;

font-size:10px;

body{

margin:0;

font-size:2rem;

display:flex;

flex:1;

min-height:100vh;

align-items:center;

}

1.2.2設(shè)置時鐘的外圓邊框

.clock{

width:30rem;

height:30rem;

border:20pxsolidwhite;

border-radius:50%;

margin:50pxauto;

position:relative;

padding:2rem;

box-shadow:

0004pxrgba(0,0,0,0.1),

inset0003px#EFEFEF,

inset0010pxblack,

0010pxrgba(0,0,0,0.2);

}

1.2.3設(shè)置存放時分秒的容器

.clock-face{

position:relative;

width:100%;

height:100%;

transform:translateY(-3px);

.clock-face:after{

content:'';

width:30px;

height:30px;

border-radius:100%;

background-color:white;

display:block;

top:50%;

left:50%;

transform:translate(-50%,-50%);

position:absolute;

}

1.2.4設(shè)置時分秒對應(yīng)的容器

.hand{

position:absolution;

width:100%;

height:100%;

.second-hand:after{

content:'';

display:block;

width:5px;

height:50%;

background-color:black;

left:50%;

bottom:50%;

transform:translate(-50%,0%);

position:absolute;

.min-hand:after{

content:'';

display:block;

width:10px;

height:40%;

background-color:gray;

left:50%;

bottom:50%;

transform:translate(-50%,0%);

position:absolute;

.hour-hand:after{

content:'';

display:block;

width:15px;

height:20%;

background-color:white;

left:50%;

bottom:50%;

transform:translate(-50%,0%);

position:absolute;

}

transform布局的方式

2、JS部分（IIFE立即函式，不會外露）

（1）首先要實現(xiàn)的是獲取當前的時間和針

（2）設(shè)置時間的轉(zhuǎn)動

2.1先獲取每個針

letsecond=document.querySelector('.second-hand');

letmin=document.querySelector('.min-hand');

lethour=document.querySelector('.hour-hand');

2.2時針的指向

2.2.1獲取當前的時間

functionsetDate(){

//首先先獲取時間，用Data（）

letdata=newData();

}

2.2.2讓上面獲取的指針等于Data（）的時間

1.這里要使用到transform:rotate()函數(shù),獲得要轉(zhuǎn)動的角度。

second.style.transform=`rotate(數(shù)字/變量+Deg)`;

min.style.transform=`rotate(數(shù)字/變量+Deg)`;

hour.style.transform=`rotate(數(shù)字/變量+Deg)`;

2.由于當前時間的時分秒還沒有獲取，所以要先獲取當前時分秒的時間，當成變量賦值給rotate函數(shù)

letsecondDeg=data.getSeconds();

letminDeg=data.getMinutes();

lethourDeg=data.getHours();

3.由于rotate需要獲得的是角度而不是時間，所以你需要分別計算出時分秒走動一次需要多少的角度。

letsecondDeg=data.getSeconds()*6;

letminDeg=data.getMinutes()*6;

lethourDeg=data.getHours()*30;

4.完整的賦值

letsecond=document.querySelector('.second-hand')

letmin=document.querySelector('.min-hand')

lethour=document.querySelector('.hour-hand')

functionsetClock(){

letdata=newDate();

letsecondDeg=data.getSeconds()*6//(deg=360/60)

letminDeg=data.getMinutes()*6//(deg=360/60)

lethourDeg=data.getHours()*30//(deg=360/12)

second.style.transform=`rotate(${secondDeg}deg)`

min.style.transform=`rotate(${minDeg}deg)`

hour.style.transform=`rotate(${hourDeg}deg)`

setClock();

2.2設(shè)置計時器讓他們走動

/**多種計時器的方法

*1.setInterval(函數(shù)，時間)

*2.setTimeout(函數(shù)，時間)

*3.window.requestAnimationFrame(函數(shù))這個不需要設(shè)置時間，它會根據(jù)你硬件的速度來更改時間

**/

setInterval(setDate,1000);//設(shè)定間隔，執(zhí)行很多次

/*functiontimeoutHandler(){

setDate();

setTimeout(timeoutHandler,1000);//這樣就可以連續(xù)執(zhí)行了

setTimeout(timeoutHandler,1000);//延遲多久執(zhí)行一次*/

/*functionanimationHandler(){

setDate();

window.requestAnimationFrame(animationHandler);//處理畫面更新的setTimeout

window.requestAnimationFrame(animationHandler);*/

2.3發(fā)現(xiàn)問題

發(fā)現(xiàn)分針和時針會等到秒鐘走完一圈后才移動一個，我們應(yīng)該讓他緩慢的移動，所以需要在時分后面算上分秒的角度

*一分鐘走60秒，而分針走一小格的角度是6，所以一度走幾秒算出來，單位是度/秒。最后乘以時間，所以單位是度/秒秒=度。

letsecondDeg=d