前言
今天我们来学习做一个小Demo
直接上效果图
正文
要实现这一一个小Demo
我们需要 第一步 一个html文件来实现页面布局
第二步
一个css文件来实现页面样式
第三步
一个js文件来实习时间捕捉！
第一步：编写html文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clock</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>实现一个html文件很简单，我们先连接上css文件和js文件。
我们观察我们的效果图，其实这个时钟的样式就是在一个大圆上面盖上了一个小圆！！
它包含一个外部的时钟脸和内部的时钟脸，还有表示时、分、秒的指针
所以,我们来对这些图层进行逐一分析
<div class="clock">：创建一个新的div元素，并给它赋予"clock"这个类名。<div class="outer-clock-face">：在这个div中，创建另一个div并给它赋予"outer-clock-face"这个类名。代表时钟的外面那一圈。<div class="marking marking-one"></div>：在"outer-clock-face"这个div中，创建另一个div并给它赋予"marking marking-one"这个类名。这是时钟上的一个标记。<div class="marking marking-two"></div>：同上，创建另一个标记并赋予它"marking marking-two"这个类名。<div class="marking marking-three"></div>：同上，创建另一个标记并赋予它"marking marking-three"这个类名。<div class="marking marking-four"></div>：同上，创建另一个标记并赋予它"marking marking-four"这个类名。<div class="inner-clock-face">：在"outer-clock-face"这个div中，创建另一个div并给它赋予"inner-clock-face"这个类名。这代表时钟的里面那一圈。<div class="hand hour-hand"></div>：在"inner-clock-face"这个div中，创建另一个div并给它赋予"hand hour-hand"这个类名。这代表时钟上的时针。<div class="hand min-hand"></div>：同上，创建另一个指针并赋予它"hand min-hand"这个类名。这代表时钟上的分针。<div class="hand second-hand"></div>：同上，创建另一个指针并赋予它"hand second-hand"这个类名。这代表时钟上的秒针。
第二步：编写css文件
首先我们将代码先放出来！
css
html{
background: rgb(248, 249, 249);
font-size: 10px;
}
body{
margin: 0;
/* rem相对单位，2rem相当于20px，相对于html中的font-size */
font-size: 2rem;
/* 弹性布局 */
display: flex;
/* 只有弹性布局才能加下面两个 */
/* 弹性主轴居中 */
justify-content: center;
/* 弹性竖直方向居中 */
align-items: center;
/* vh vie height视图高度,参考整个浏览器高度100vh = 100%屏幕高度 */
height: 100vh;
}
.clock{
width: 30rem;
height: 30rem;
border: 7px solid #ffebdb;
border-radius: 50%;
/* 上右下左 */
/* 边框阴影 x轴偏移量 y轴偏移量 阴影扩散范围 red green blue 透明度(1完全不透明，0完全透明)*/
box-shadow: -4px -4px 10px rgba(67,67,67,0.1),
inset 4px 4px 10px rgba(168,145,128,0.6),
inset -4px -4px 10px rgba(201,175,155,0.2),
4px 4px 10px rgba(68,145,128,0.6);
background-image: url('./da.jpg');
/* 让图片完美展示 */
background-size: 111%;
padding: 2rem;
}
.outer-clock-face{
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
border: 1px solid #000;
}
.outer-clock-face::before,.outer-clock-face::after{
/* 伪元素一定要content，否则失效 */
content: '';
width: 10px;
height: 100%;
background: #ffff02;
position: absolute;
border-radius: 8px;
left:50%;
margin-left: -5px;
/* transform: translate(-5px); 自身缩进-5px*/
}
.outer-clock-face::after{
transform: rotate(90deg);
transform-origin: center center;
}
.marking{
width: 3px;
height: 100%;
background:#06f502;
position: absolute;
left:50%;
margin-left: -1.5px;
transform-origin: center center;
}
.marking-one{
transform:rotateZ(30deg);
}
.marking-two{
transform:rotateZ(60deg);
}
.marking-three{
transform:rotateZ(120deg);
}
.marking-four{
transform:rotateZ(150deg);
}
.inner-clock-face{
background-image: url('./ada.png');
background-size: 111%;
position: absolute;
top: 10%;
left:10%;
width: 80%;
height: 80%;
background-color: #ffebdb;
/* 层级提高 */
z-index: 2;
border-radius: 50%;
}
.inner-clock-face::before{
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2616da;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
}
.hand{
width: 50%;
height: 6px;
background: red;
border-radius: 6px;
position: absolute;
top: 50%;
right: 50%;
margin-top: -3px;
transform-origin: 100% 50%;
transform: rotate(90deg);
}
.hour-hand{
width: 30%;
}
.min-hand{
width: 40%;
height: 3px;
background: rgb(2, 242, 255);
}
.second-hand{
background: #b3b3b3;
width: 45%;
height: 2px;
}接下来，我们逐步进行分析:
.html:背景色为白色,字体大小为10px
body:
-
margin: 0;：这行代码将元素的外边距设为0。让元素没有任何水平或垂直的边距。 -
font-size: 2rem;：这行代码设置了元素的字体大小为2rem。看代码注释，1rem等于10px，因此，字体大小为20px。这是相对于HTML元素的字体大小的。 -
display: flex;：这行代码将元素的显示属性设置为弹性布局（flexbox）。 -
justify-content: center;：这行代码将元素的主轴对齐方式设置为居中。。 -
align-items: center;：这行代码将元素的交叉轴对齐方式设置为居中。 -
height: 100vh;：这行代码将元素的高度设置为页面的100%。
.clock
width: 30rem;和height: 30rem;：这两行代码将元素的高度和宽度都设置为30rem。1rem等于10px，让元素的高度和宽度分别为300px。border: 7px solid #ffebdb;：这行代码为元素添加了一个边框，边框宽度为7px，颜色为#ffebdb（一种浅橙色），并且边框样式为实线。border-radius: 50%;：这行代码将元素的边框圆角半径设置为50%。box-shadow:：这行代码为元素添加了阴影效果。background-size: 111%;：这行代码将背景图片的尺寸设置为元素的111%。padding: 2rem;：这行代码在元素的内容和边框之间添加了内边距，内边距的宽度为2rem。
.outer-clock-face和.outer-clock-face::before和.outer-clock-face::after
.outer-clock-face是主元素，它被设置为100%的宽度和高度，并且边框半径设置为50%，这使得它呈现为一个完全的圆形。这个元素被定位为相对定位，并且有一个1px的黑色边框。.outer-clock-face::before和.outer-clock-face::after是两个伪元素，它们被用来创建两个小的黄色条形部分。它们都有宽度10px，高度100%，背景颜色为黄色，并且边框半径为8px。这两个元素都被设置为绝对定位，并且左边距被设置为50%，然后通过margin-left: -5px;将它们各自移动到主元素的中心。.outer-clock-face::after:在这个伪元素以中心旋转90°
.marking
.marking：这是一个 CSS 类选择器，它为带有marking类的 HTML 元素应用以下样式。width: 3px;：设置元素的宽度为 3 像素。height: 100%;：设置元素的高度为其父元素的高度的 100%。background:#06f502;：设置元素的背景色为翠绿色（#06f502）。position: absolute;：将元素定位为绝对定位。left:50%;：将元素的左边设置为父元素的中心点。margin-left: -1.5px;：将元素的左边外边距设置为 -1.5 像素。这会使元素向右移动 1.5 像素，使得其中心点与父元素的中心点对齐。transform-origin: center center;：定义了转换（例如旋转和缩放）的基准点为中心点。- 接下来的
marking-one,marking-two,marking-three,marking-four都是旋转角度的设置
.inner-clock-face
.inner-clock-face： 这个样式为元素设置了一个背景图像，背景图像的尺寸被设置为元素的111%，以填充元素的背景区域。该元素被定位为绝对定位，并且其顶部和左侧距离父元素各有10%，而其宽度和高度都设置为80%。此外，还设置了z-index为2，这可以理解为元素的层级是第二个（更高的值表示元素在堆叠顺序中更高）。元素的边框半径被设置为50%，使其呈现圆形。.inner-clock-face::before： 这是一个伪元素，并且它的宽度和高度都被设置为16px。它的边框半径也被设置为50%，使其呈现圆形。。这个元素被定位为绝对定位，并且其左边缘和上边缘都距离.inner-clock-face的中心各50%，然后通过transform属性将其自身的中心点移动到.inner-clock-face的中心。最后，z-index被设置为2，这个伪元素将在.inner-clock-face元素的上方（更高的z-index值意味着元素在层级顺序中更高）。
.hand
.hand：这个类是用来定义时钟的指针的指针部分的样式。它是一个宽度为50%，高度为6像素的红色条形，边框半径为6像素，使其成为一个半圆形。这个元素被定位在父元素的右上角，并通过transform-origin和transform属性旋转90度，使其垂直显示。.hour-hand：这个类定义了小时指针的样式。它的宽度为30%。.min-hand：这个类定义了分钟指针的样式。它的宽度为40%，高度为3像素，并且有一个半透明的蓝色背景。.second-hand：这个类定义了秒针的样式。它的宽度为45%，高度为2像素，并且有一个灰色的背景。
接下来就是我们的最后一步~
第三步：实现js文件
直接上代码!!
js
const secondhand = document.querySelector('.second-hand')
const minhand = document.querySelector('.min-hand')
const hourhand = document.querySelector('.hour-hand')
//console.log(secondhand);
function setTime(){
const now = new Date()
//获取当前的秒数
const seconds = now.getSeconds()
const secondsDegrees = seconds * 6 + 90 //已经提前走了90°
secondhand.style.transform=`rotate(${secondsDegrees}deg)`
//获取当前的分钟
const min = now.getMinutes()
const minDegrees = min*6+90
minhand.style.transform=`rotate(${minDegrees}deg)`
//获取当前的小时
const hours = now.getHours()
const hourDegrees = hours*30+ 90 +min * 0.5
hourhand.style.transform=`rotate(${hourDegrees}deg)`
}
setTime()
// 定时器
setInterval(setTime,1000)我们js的功能就实现让我们的指针转动起来！如何让指针转动起来呢？我们来分析:
- 首先，通过
document.querySelector选择器获取了HTML中对应的三个元素：.second-hand，.min-hand，.hour-hand。 setTime函数用来设置时钟的时间。- 在
setTime函数中，通过new Date()获取了当前的时间。 - 对于秒针：
- 通过
now.getSeconds()获取了当前的秒数，并将其乘以6（因为每秒转6度）再加上90度（因为开始时已经走了90度）。 - 然后，使用CSS的
transform: rotate()属性来旋转秒针。
- 通过
- 对于分针：
- 通过
now.getMinutes()获取了当前分钟数，并将其乘以6（因为每分钟转6度）再加上90度（因为开始时已经走了90度）。 - 然后，使用CSS的
transform: rotate()属性来旋转分针。
- 通过
- 对于时针：
- 通过
now.getHours()获取了当前的小时数，并将其乘以30（因为每小时转30度）再加上90度和当前分钟数的0.5（因为每分钟时针走0.5度）。 - 然后，使用CSS的
transform: rotate()属性来旋转时针。
- 通过
setTime函数在页面加载时被调用一次，以设置初始时间。- 使用
setInterval(setTime, 1000)设置了一个定时器，每秒调用一次setTime函数，以实时更新时间。
好了，整个小Demo到这里就结束啦！！
看效果图!!!
大家可以动手去试一试哦！！
如果你有任何想法或者建议欢迎你在评论区留言！！
点个小小的赞鼓励支持一下吧！🌹🌹🌹🌹