本文实例为大家分享了javascript实现时钟功能的具体代码,供大家参考,具体内容如下 1、html和CSS部分 1.1 HTML部分 1.1.1先放在一个容器中clock,存放
本文实例为大家分享了javascript实现时钟功能的具体代码,供大家参考,具体内容如下
1.1 HTML部分
1.1.1先放在一个容器中clock,存放 用来存放时针、分钟、秒钟的容器
<div class = "clock"></div>
1.1.2 用来存放时针、分钟、秒钟的容器
<div class="clock">
<div class="clock-face"></div>
</div>
1.1.3 各个时针、分针、秒钟的容器
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
1.2 CSS部分
1.2.1 背景、布局
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
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:20px solid white;
border-radius:50%;
margin:50px auto;
position:relative;
padding:2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(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布局的方式
(1)首先要实现的是获取当前的时间和针
(2)设置时间的转动
2.1 先获取每个针
let second = document.querySelector('.second-hand');
let min = document.querySelector('.min-hand');
let hour = document.querySelector('.hour-hand');
2.2 时针的指向
2.2.1 获取当前的时间
function setDate(){
//首先先获取时间,用Data()
let data = new Data();
}
2.2.2 让上面获取的指针等于Data()的时间
1.这里要使用到transform:rotate()函数,获得要转动的角度。
second.style.transform = `rotate(数字/变量+Deg)`;
min.style.transform = `rotate(数字/变量+Deg)`;
hour.style.transform = `rotate(数字/变量+Deg)`;
2.由于当前时间的时分秒还没有获取,所以要先获取当前时分秒的时间,当成变量赋值给rotate函数
let secondDeg = data.getSeconds();
let minDeg = data.getMinutes();
let hourDeg = data.getHours();
3.由于rotate需要获得的是角度而不是时间,所以你需要分别计算出时分秒走动一次需要多少的角度。
let secondDeg = data.getSeconds() * 6;
let minDeg = data.getMinutes() * 6;
let hourDeg = data.getHours() *30;
4.完整的赋值
let second = document.querySelector('.second-hand')
let min = document.querySelector('.min-hand')
let hour = document.querySelector('.hour-hand')
function setClock(){
let data = new Date();
let secondDeg = data.getSeconds() * 6 // (deg = 360/60)
let minDeg = data.getMinutes() * 6 // (deg = 360/60)
let hourDeg = 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 设置计时器让他们走动
setInterval(setDate, 1000); //设定间隔,执行很多次
2.3 发现问题
发现分针和时针会等到秒钟走完一圈后才移动一个,我们应该让他缓慢的移动,所以需要在时分后面算上分秒的角度
*一分钟走60秒,而分针走一小格的角度是6°,所以一度走几秒算出来,单位是度/秒。最后乘以时间,所以单位是度/秒 秒 = 度。
let secondDeg = data.getSeconds() * 6; //(360/60)
let minDeg = data.getMinutes() * 6 + data.getSeconds() *6/60; //(360/60)
let hourDeg = data.getHours() * 30 + data.getMinutes() * 30/60;//(360/12)
--结束END--
本文标题: JavaScript实现时钟功能
本文链接: https://www.lsjlt.com/news/152142.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0