前言

今天我们来学习做一个小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到这里就结束啦！！

看效果图!!!

大家可以动手去试一试哦！！

如果你有任何想法或者建议欢迎你在评论区留言！！

点个小小的赞鼓励支持一下吧！🌹🌹🌹🌹

【实战】小Demo-仅需三步-用JS轻松玩转实时时钟！

前言

正文

第一步：编写html文件

第二步：编写css文件

第三步：实现js文件

第一步：编写`html`文件

第二步：编写`css`文件

第三步：实现`js`文件