html + css + js —— 实现你的专属时钟 ！

BONE
1,759 阅读12分钟

前端

什么是前端？前端是指网页或应用程序中用户直接与之交互的部分。它主要涉及到网页的外观和用户体验。前端开发涉及使用HTML、CSS和JavaScript等技术来创建和设计网页的结构、样式和交互效果。单从概念来看，大家可能并不能直观地感受到它的意思；接下来我将会带领大家做一个以下图示的时钟来深入地感受前端。

时钟示例图如下： image.png

要完成以上所示的时钟，我们需要用html,css以及js（javascript）等技术才能将其实现，接下来请跟随我的步骤一步一步完成属于你的专属闹钟。

HTML

HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用于描述网页的结构和内容。

HTML中的文本型标签可以分为三大类：

  1. 块级标签 （div, p）
  2. 行内块级标签 (input)
  3. 行内标签 (span)

对于这些标签的理解我们可以创建一个HTML文件去慢慢理解：

<!-- ! + Tab键 直接生成HTML基本代码架构  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        input{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            color: brown;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <p>kunfc</p>
    <span>world</span>
    <a href="https://www.baidu.com">百度</a>
    <input type="text">
</body>
</html>

运行效果图如下：

image.png

可以看出hello和kunfc都是直接占据了一整行，这就说明它们俩的标签：div和p，都是属于块级标签，单独占据一整行，而world和input输入框都是在同一行，再看代码中对world的span标签以及input标签都设置了高和宽的css样式，然而效果图中只有input输入框出现了宽高的样式，这也恰恰说明了span标签是行内标签，input标签是行内块级标签；一般来说块级标签可以设置宽高，而行内标签的宽高由内容决定！

大概了解完之后，我们可以开始写时钟的HTML代码；由图可以看出时钟的表盘可以分为两部分：外表盘和内表盘；外表盘的刻度可以由4根交叉的棍子组成，再由内表盘覆盖掉中间部分；内表盘的三根指针则可以看作是三根绕z轴旋转的棍子，得到以上思路后就可以开始写HTML代码了：

image.png

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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 class="circle"></div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

写完基本的图形框架后，就要对标签的css样式进行设置。

CSS

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页样式和布局的标记语言。它与HTML配合使用，用于控制网页的外观和样式。 CSS的主要作用是通过选择器和属性来选择HTML元素，并为其应用样式。通过CSS，可以改变文本的颜色、字体、大小，调整元素的边距、背景、边框等。CSS还可以实现布局控制，如定位、浮动、响应式设计等。

我们可以单独创建一个css样式文件，再用link标签把css样式链接到HTML文件中;

/* 设置页面的外边距和内边距为0 */
*{
    margin: 0;
    padding: 0;
}
/* 设置body元素为flex弹性布局，水平和垂直居中，高度为视口的100% */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
/* 设置钟表的样式，宽度和高度为300px，边框为7px实线，背景图片为指定路径的图片，背景尺寸为111%，内边距为20px */
.clock{
    width: 300px;
    height: 300px;
    border: 7px solid #ffebdb;
    border-radius: 50%;
    background-image: url(./anime_series_ace_flower_sky_cloud_one_piece_1440x1066.jpg);
    background-size: 111%;
    padding: 20px;
}
/* 设置外部钟表面的样式，宽度和高度为100%，边界半径为50%，相对定位 */
.outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
/* 设置钟表刻度的样式，宽度为3px，高度为100%，背景颜色为指定颜色，绝对定位，左边距为50%，左边距的负值为自身宽度的一半，边界半径为8px，变换原点为50% 50% */
.marking{
    width: 3px;
    height: 100%;
    background-color: #596235;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 8px;
    transform-origin: 50% 50%;
}
/* 设置钟表刻度的旋转角度，用于分别将刻度旋转30度、60度、120度和-30度 */
.marking-one{
    transform: rotateZ(30deg);
}
.marking-two{
    transform: rotateZ(60deg);
}
.marking-three{
    transform: rotateZ(120deg);
}
.marking-four{
    transform: rotateZ(-30deg);
}
/* 伪元素(行内元素) ::before ::after */
/* 设置钟表刻度的样式，使用伪元素before和after，宽度为10px，高度为100%，背景颜色为指定颜色，显示为块级元素，绝对定位，左边距为50%，左边距的负值为自身宽度的一半，边界半径为8px。其中after伪元素旋转90度 */
.outer-clock-face::before,
.outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background-color: #596235;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-radius: 8px;
}
.outer-clock-face::after{
    transform: rotateZ(90deg);
}
/* 设置内部钟表面的样式，宽度和高度为80%，边界半径为50%，背景颜色为指定颜色，绝对定位，z轴索引为1，左边距为50%，上边距为50%，使用transform属性将元素水平和垂直居中，背景图片为指定路径的图片，背景尺寸为111% */
.inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #ffebdb;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image: url('./anime_series_ace_flower_sky_cloud_one_piece_1440x1066.jpg');
    background-size: 111%;
}
/* 设置钟表指针的样式，宽度为30%，高度为6px，背景颜色为指定颜色，绝对定位，上边距为50%，右边距为50%，边界半径为6px，上边距的负值为自身高度的一半，使用transform属性将元素旋转90度，变换原点为100% 50% */
.hand{
    width: 30%;
    height: 6px;
    background-color: #b03715;
    position: absolute;
    top: 50%;
    right: 50%;
    border-radius: 6px;
    margin-top: -3px;
    transform: rotate(90deg);
    transform-origin:100% 50%;
}
/* 设置时针、分针和秒针的样式，宽度分别为30%、40%和45%，高度分别为6px、4px和2px，上边距的负值为自身高度的一半，背景颜色分别为指定颜色 */
.hour-hand{
    width: 30%;
    height: 6px;
    margin-top: -3px;
    background-color: #2379e9;
}
.min-hand{
    width: 40%;
    height: 4px;
    margin-top: -2px;
    background-color: #2379e9;
}
.second-hand{
    width: 45%;
    height: 2px;
    margin-top: -1px;
    background-color: #2379e9;
}
/* 设置钟表中心圆点的样式，宽度和高度为8px，边界半径为50%，背景颜色为指定颜色，绝对定位，上边距为50%，左边距为50%，使用transform属性将元素水平和垂直居中 */
.circle{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef1010;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

在以上的CSS样式中，有一些是比较重要的样式且需要理解；具体如下：

display: flex;是CSS中用于创建弹性布局的属性。通过设置该属性，可以将元素的子元素排列成一行或一列，以实现灵活的布局。弹性布局的主要特点是可以根据容器的大小自动调整子元素的位置和大小，以适应不同的屏幕尺寸和设备。它可以轻松实现水平或垂直居中、等高列布局、自适应布局等常见的网页布局需求。

position: relative;当将一个元素的 position 属性设置为 relative 时，该元素会相对于其正常位置进行定位。也就是说，元素的位置会在文档流中保留，并且可以通过设置 top、right、bottom、left 属性来调整元素相对于其正常位置的偏移量。相对定位会使元素相对于其正常位置进行定位，但不会影响其他元素的布局。需要注意的是，相对定位不会脱离文档流，元素仍然会占据其正常的空间，不会对其他元素产生覆盖或重叠的影响。

相对定位的特点包括：

  • 元素仍然占据文档流中的位置，不会造成其他元素的位置变化。
  • 元素的偏移量是相对于其正常位置而言的，而不是相对于其他元素。
  • 元素的层叠顺序由其在HTML文档中的顺序决定。

position: absolute;绝对定位使元素脱离了文档流，并相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于文档的初始包含块进行定位**。所谓"已定位祖先元素"指的是在元素的祖先元素链中，有一个或多个元素的 position 属性被设置为 relative、absolute 或 fixed。也就是说，元素的位置不再受到其他元素的影响，可以通过设置 top、right、bottom、left 属性来精确地定位元素。需要注意的是，绝对定位的元素会脱离文档流，可能会导致其他元素的位置变化，因此在使用绝对定位时需要小心处理，避免影响整体布局。

绝对定位的特点包括：

  • 元素脱离了文档流，不会占据正常的空间，可以覆盖其他元素。
  • 元素的位置是相对于其最近的已定位祖先元素进行定位的，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。
  • 元素的层叠顺序由 z-index 属性决定。

transform-origin: 50% 50%; 是CSS中用于设置元素变换原点的属性。 通过设置 transform-origin 属性，可以指定元素变换的基准点，即变换操作的中心点。在这个例子中，50% 50% 表示元素变换的基准点位于元素的中心位置。

.outer-clock-face::before 和 .outer-clock-face::after 是CSS中的伪元素选择器，用于选择 .outer-clock-face 元素的前置伪元素和后置伪元素。 伪元素是CSS中的一种特殊元素，可以通过选择器来创建并在元素的指定位置插入内容。常见的伪元素有 ::before 和 ::after。 .outer-clock-face::before 选择器表示选择 .outer-clock-face 元素的前置伪元素，可以通过设置其样式来为该元素的前面插入内容。 .outer-clock-face::after 选择器表示选择 .outer-clock-face 元素的后置伪元素，可以通过设置其样式来为该元素的后面插入内容。 这两个选择器通常用于为元素添加额外的装饰或内容，如在时钟的外圈添加指针或其他图形效果。通过设置 content 属性和其他样式属性，可以自定义伪元素的外观和位置。 需要注意的是，伪元素默认是行内元素，如果需要改变其布局行为，可以通过设置 display 属性来改变。

transform: translate(-50%,-50%); 是CSS中的变换属性，用于对元素进行平移变换。 具体解释如下：

  • translate 函数用于指定元素在水平和垂直方向上的平移距离。
  • -50% 表示元素在水平方向上向左平移50%自身宽度的距离，同时在垂直方向上向上平移50%自身高度的距离。 通过设置 transform: translate(-50%,-50%);，元素将以自身的中心点为基准，向左平移50%自身宽度的距离，同时向上平移50%自身高度的距离。这通常用于实现元素在父容器中居中对齐的效果。

完成样式设置之后，我们就能得到一个固定不动的时钟表盘，最后一步我们只需让三根指针跟随时间转动起来，在前端中，页面上的动态样式，都是通过javascript完成的。

JS(JavaScript)

JS是指JavaScript，它是一种高级的、解释型的编程语言。JavaScript被广泛用于Web开发中，用于为网页添加交互性和动态功能。同样的，js代码也可以单独存放在一个文件中，并用script标签链接到html上。

js代码如下：

// 获取秒针、分针和时针的元素
var secondHand = document.querySelector('.second-hand');
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');

// 更新时钟时间的函数
function setDate() {
    // 获取当前时间
    var now = new Date();

    // 读取秒数
    var seconds = now.getSeconds();
    // 计算秒针的旋转角度
    var secondsDeg = ((seconds / 60) * 360) + 90;
    // 设置秒针的旋转角度
    secondHand.style.transform = `rotate(${secondsDeg}deg)`;

    // 读取分钟数
    var min = now.getMinutes();
    // 计算分针的旋转角度
    var minDeg = ((min / 60) * 360) + ((seconds / 60) * 6) + 90;
    // 设置分针的旋转角度
    minHand.style.transform = `rotate(${minDeg}deg)`;

    // 读取小时数
    var hour = now.getHours();
    // 计算时针的旋转角度
    var hourDeg = ((hour / 12) * 360) + ((min / 60) * 30) + 90;
    // 设置时针的旋转角度
    hourHand.style.transform = `rotate(${hourDeg}deg)`;
}

// 每秒钟调用一次setDate函数，更新时钟时间
setInterval(setDate, 1000);

var minDeg = ((min / 60) * 360) + ((seconds / 60) * 6) + 90;

这行代码用于计算分针的旋转角度。

具体解释如下：

  • min / 60 计算出分针所在的分钟比例，范围从0到1。
  • ((min / 60) * 360) 将分钟比例转换为对应的角度，乘以360度。
  • ((seconds / 60) * 6) 计算出秒针对应的角度，因为每秒钟秒针会走6度。
  • ((min / 60) * 360) + ((seconds / 60) * 6) 将分针和秒针的角度相加，得到最终的分针角度。
  • + 90 是为了将分针的初始位置从3点钟方向调整到12点钟方向，使得分针指向正确的位置。

综上所述，这行代码计算出了分针的旋转角度，使得分针可以根据当前的分钟数和秒数正确地显示在时钟上。时针计算角度同理可得。

完成以上步骤，你也可以得到你的专属时钟！

image.png

avatar
文章
阅读
粉丝