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

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

1、HTML和CSS部分

1.1HTML部分

1.1.1先放在一個(gè)容器中clock，存放用來(lái)存放時(shí)針、分鐘、秒鐘的容器

divclass="clock"/div

1.1.2用來(lái)存放時(shí)針、分鐘、秒鐘的容器

div

div/div

/div

1.1.3各個(gè)時(shí)針、分針、秒鐘的容器

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è)置時(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è)置存放時(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è)置時(shí)分秒對(duì)應(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立即函式，不會(huì)外露）

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

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

2.1先獲取每個(gè)針

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

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

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

2.2時(shí)針的指向

2.2.1獲取當(dāng)前的時(shí)間

functionsetDate(){

//首先先獲取時(shí)間，用Data（）

letdata=newData();

}

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

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

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

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

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

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

letsecondDeg=data.getSeconds();

letminDeg=data.getMinutes();

lethourDeg=data.getHours();

3.由于rotate需要獲得的是角度而不是時(shí)間，所以你需要分別計(jì)算出時(shí)分秒走動(dòng)一次需要多少的角度。

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è)置計(jì)時(shí)器讓他們走動(dòng)

/**多種計(jì)時(shí)器的方法

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

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

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

**/

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

/*functiontimeoutHandler(){

setDate();

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

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

/*functionanimationHandler(){

setDate();

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

window.requestAnimationFrame(animationHandler);*/

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

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

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

letsecondDeg=d