前言

HTML、CSS和JS是构建网页的三大核心技术，它们各自扮演着不同的角色，共同协作，使得网页能够呈现出丰富多彩的内容和交互效果。今天我们将通过制作一个钟表，来初步运用这三样技术。

屏幕截图 2024-04-23 010943.png

首先我们需要创建三个页面 clock.html，clock.css，clock.js 然后在html界面引入css和js样式

<link rel="stylesheet" href="./clock.css">

<script src="clock.js"></script>

一. HTML：创造基本框架

HTML是网页的骨架，它定义了网页的基本结构和内容。通过观察上图，我们发现该钟表鸭由两部分组成，分别是内表盘和外表盘。其中内表盘需要加入分针时针和秒针元素；外表盘需要来“木棍”表示刻度。

1.外表盘盒子

首先要构建如图所示的钟表我们需要两个面，钟表的里面和外面。我们先构建一个大盒子一个小盒子在他们中间加上刻度表就能创造出一个钟表大体的样子。下面我们先创造一个外表盘把刻度表表示上去

<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>

2.内表盘盒子

然后我们着手构建一个内表盘把时针，分针，秒针放进去

<div class="inner-clock-face">
                <div class="hand hour-hand"></div>
                <div class="hand min-hand"></div>
                <div class="hand second-hand"></div>
            </div>

因为内表盘在外表盘中，所以我们用外表盘这个大盒子来装住内表盘，这样方便确定内表盘的位置。最后我们的body部分就完成啦

<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="clock.js"></script>
</body>

二. CSS：构建你的钟表图样

CSS是网页的化妆师，它负责网页的样式设计。通过CSS，我们可以控制HTML元素的布局、颜色、字体、动画等外观表现。

1.构建表盘

我们需要构建一个表盘盒，设置他的大小和颜色，以及填充图片的缩放接着我们构建表盘的外形，在这里我选用的是一只小黄鸭图片，大家可以选择自己喜欢的图片链接填上去~

.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url('./微信图片_20240418163146.jpg');
    background-size: 120%;
    padding: 20px;
}

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}

2.构建“刻度盘”

我们把内表盘“拆开”，会发现其实表盘有“木棍”组成。所以我们可以创造出一根粗木棍和一根细木棍，通过旋转得到图示，之后用内表盘覆盖。这里我们用伪元素：before ：after来表示横竖的两根粗木棍，用content:''来定义伪元素的内容。其中注意的有两点

平移时应注意减去自己的宽度

left平移是先对于自己的左边来进行平移的，left:50%是将元素的左边缘放在了父容器的中间。如果要让自己位于父容器中间的位置就必须再减去自己的宽度的50%，即transform:translate(-50%)

旋转时应该定好旋转点

运行旋转功能时，应该选好旋转点。ransform-origin 是一个 CSS 属性，它定义了元素变换的起始点。transform-origin: center center;第一个 center 对应 x 轴表示元素的水平中心点。第二个center 对应 y 轴表示元素的垂直中心点。

.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background: #596235;
    display: block;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.outer-clock-face::after {
    transform: rotateZ(90deg);
    transform-origin: center center;
}

三.js:让你的指针动起来

JS是网页的魔法师，它赋予了网页交互性和动态性。通过JS，我们可以实现各种复杂的交互效果。那么如何让你的指针动起来呢？首先我们得选中3个指针，计算每秒分针时针秒针转过的角度，将其表示出来；然后获取实时的时间，利用定时器达到每秒刷新的效果。如下；

var secondHand = document.querySelector('.second-hand');// 选择具有特定类的第一个元素 
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');

function setTime() {          //设置函数（负责计算每个指针应该旋转的角度）
    var now = new Date();     //获取到当前时间

    //读取秒针
    var seconds = now.getSeconds()               //获取当前秒数（0~59）
    var secondsDegrees = seconds * 6 + 90               //计算旋转角度
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`//应用计算出的旋转角度到指针上

    //读取分针
    var mins = now.getMinutes()
    var minsDegrees = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegrees}deg)`

    //读取时针
    var hours = now.getHours()
    var hoursDegrees = hours * 30 + 90 + mins * 0.5
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

//定时器,每隔一秒调用一次setTime函数，确保指针实时刷新
setInterval(setTime, 1000)

结语

通过这次的制作，我们初步了解运用了构建网页的三大核心技术。 HTML定义了网页的结构和内容，CSS负责网页的样式设计，而JS则实现了网页的交互性和动态性。它们各自发挥自己的优势，三者相互协作，共同构建了一个丰富多彩的网页世界。

前端小白教会你怎样做一个钟表鸭~

前言