JavaScript实现时钟功能

第JavaScript实现时钟功能本文实例为大家分享了JavaScript实现时钟功能的具体代码，供大家参考，具体内容如下

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设置时钟的外圆边框

.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设置存放时分秒的容器

.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设置时分秒对应的容器

.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）首先要实现的是获取当前的时间和针

（2）设置时间的转动

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()函数,获得要转动的角度。

second.style.transform=`rotate(数字/变量+Deg)`;

min.style.transform=`rotate(数字/变量+Deg)`;

hour.style.transform=`rotate(数字/变量+Deg)`;

2.由于当前时间的时分秒还没有获取，所以要先获取当前时分秒的时间，当成变量赋值给rotate函数

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设置计时器让他们走动

/**多种计时器的方法

*1.setInterval(函数，时间)

*2.setTimeout(函数，时间)

*3.window.requestAnimationFrame(函数)这个不需要设置时间，它会根据你硬件的速度来更改时间

**/

setInterval(setDate,1000);//设定间隔，执行很多次

/*functiontimeoutHandler(){

setDate();

setTimeout(timeoutHandler,1000);//这样就可以连续执行了

setTimeout(timeoutHandler,1000);//延迟多久执行一次*/

/*functionanimationHandler(){

setDate();

window.requestAnimationFrame(animationHandler);//处理画面更新的setTimeout

window.requestAnimationFrame(animationHandler);*/

2.3发现问题

发现分针和时针会等到秒钟走完一圈后才移动一个，我们应该让他缓慢的移动，所以需要在时分后面算上分秒的角度

*一分钟走60秒，而分针走一小格的角度是6，所以一度走几秒算出来，单位是度/秒。最后乘以时间，所以单位是度/秒秒=度。

letsecondDeg=d