掘金阅读 ( ) • 2024-04-24 10:39

theme: arknights

前言

今天让我们来运用前端三剑客的相关基础知识来做一个电子时钟吧，通过这个项目，我们不仅可以学到前端开发的基础知识，还能够让我们的朋友们看到我们的"前端功力"，然后他们会说，“哇，你居然能做出一个时髦的电子时钟？真是太厉害了！” 所以，让我们摩拳擦掌，准备在前端的世界中展现我们的魅力吧！

准备工作

要开始制作电子时钟，首先我们需要准备以下工作：

HTML 结构：创建一个 HTML 文件，定义时钟的基本结构，包括时针、分针、秒针以及时钟的外观。
CSS 样式：使用 CSS 来美化我们的时钟，包括设置时钟的外观、大小、颜色等，让它看起来时髦又抓眼球。
JavaScript 动态更新：利用 JavaScript 来实现时钟的动态更新，确保秒针、分针和时针按照当前时间正确地旋转。
事件监听：监听页面加载事件，以便在页面加载完成后自动启动时钟更新功能。
日期和时间对象：利用 JavaScript 的日期和时间对象来获取当前的小时、分钟和秒数，从而确定时针、分针和秒针的位置。
兼容性处理：考虑不同浏览器对 HTML、CSS 和 JavaScript 的支持，做一些兼容性处理，确保时钟能够在各种环境中正常运行。
可选项：CSS3 动画：如果想要时钟更加生动，可以使用 CSS3 动画来实现秒针的平滑移动效果，让我们的时钟更具动感。

一旦准备就绪，我们就可以开始编码啦！不过在动手之前，确保我们对以上步骤都有一定的了解，并且做好了足够的准备工作。准备好了吗？让我们开始吧！

html部分

在阅读和理解这段HTML代码之前，你需要具备一些基本的前端开发知识，包括：

HTML 结构：了解 HTML 标签的基本用法和语法，以及如何组织页面结构。
CSS 样式：了解如何使用 CSS 来样式化 HTML 元素，包括选择器、属性和值的使用。
JavaScript：了解基本的 JavaScript 语法和DOM操作，以便理解代码中的交互和动态更新部分。
文档对象模型（DOM）：了解HTML文档的DOM结构，以便理解代码中如何操作HTML元素。
响应式设计：了解如何编写响应式设计的页面，以确保页面在不同设备上的显示效果良好。
外部资源引入：了解如何通过<link>和<script>标签引入外部的CSS和JavaScript文件。

如果你对这些知识点有一定的了解，那么就可以更容易地理解和使用这段HTML代码了。

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->

<html lang="en"> <!-- 定义 HTML 文档的根元素，并指定语言为英语 -->

<head>
  <meta charset="UTF-8"> <!-- 指定文档使用 UTF-8 字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置页面在移动设备上的视口大小和初始缩放比例 -->
  <title>Document</title> <!-- 指定页面的标题 -->
  <link rel="stylesheet" href="./style.css"> <!-- 引入外部 CSS 样式表文件 -->
</head>

<body>
  <div class="clock"> <!-- 时钟容器 -->
    <div class="outer-clock-face"> <!-- 外部时钟面板 -->
      <div class="marking marking-one"></div> <!-- 外部时钟面板的刻度线1 -->
      <div class="marking marking-two"></div> <!-- 外部时钟面板的刻度线2 -->
      <div class="marking marking-three"></div> <!-- 外部时钟面板的刻度线3 -->
      <div class="marking marking-four"></div> <!-- 外部时钟面板的刻度线4 -->
    </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>
  <script src="./index.js"></script> <!-- 引入外部 JavaScript 文件 -->
</body>

</html>

这段代码是一个基本的 HTML 结构，用于创建一个简单的电子时钟。作用如下：

<!DOCTYPE html>：声明文档类型为 HTML5，确保浏览器以标准模式渲染页面。
<html lang="en">：定义 HTML 文档的根元素，指定了页面的语言为英语。
<head>：头部标签，包含了一些元数据和引用的外部资源。
- <meta charset="UTF-8">：指定文档使用 UTF-8 字符编码，以支持包括中文在内的各种字符。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置页面在移动设备上的视口大小和初始缩放比例，确保在不同设备上显示一致。
- <title>Document</title>：指定页面的标题，在浏览器标签页上显示。
- <link rel="stylesheet" href="./style.css">：引入外部 CSS 样式表文件，用于美化页面元素。
<body>：主体部分，包含了页面的可见内容。
- <div class="clock">：时钟容器，用于包裹整个时钟的结构。
  - <div class="outer-clock-face">：外部时钟面板，用于绘制时钟的刻度线。
    - <div class="marking marking-one"></div>：时钟刻度线标记，用于显示小时或分钟。
  - <div class="inner-clock-face">：内部时钟面板，用于放置时钟的时针、分针和秒针。
    - <div class="hand hour-hand"></div>：时针，用于显示当前小时。
    - <div class="hand min-hand"></div>：分针，用于显示当前分钟。
    - <div class="hand second-hand"></div>：秒针，用于显示当前秒数。
- <script src="./index.js"></script>：引入外部 JavaScript 文件，用于实现时钟的动态更新功能。

通过这个 HTML 结构，我们定义了时钟的基本组成部分，并引入了外部的 CSS 和 JavaScript 文件来实现样式和动态更新功能。接下来，我们将在 CSS 和 JavaScript 文件中添加相应的代码来完善时钟的样式和功能。

css部分

除了基本的 HTML外，还需要一些相关的css知识：

CSS 边框和背景：了解如何使用 CSS 设置元素的边框样式和背景图片。
CSS 位置和布局：理解 CSS 中的定位和布局属性，如 position、display、transform 等，以及它们如何影响元素的位置和大小。
CSS 伪元素：理解 CSS 中的伪元素 ::before 和 ::after，以及它们如何用于在元素前后插入内容。
CSS 2D 变换：了解 CSS 中的 2D 变换，如 translate、rotate 等，以及它们如何用于实现元素的移动、旋转等效果。
CSS 层叠和优先级：了解 CSS 样式的层叠规则和优先级，以确保样式被正确应用和覆盖。
图片背景处理：了解如何使用 CSS 处理元素的背景图片，包括图片大小、平铺方式等。
响应式设计：理解如何使用 CSS 中的媒体查询等技术实现响应式设计，使页面在不同设备上具有良好的显示效果。

虽然这段代码涉及了一些 CSS 高级特性，但并不需要特别深入的前沿知识，而是基于 CSS 的基本概念和常用技巧实现的。

.clock {
  width: 300px;
  /* 设置时钟容器的宽度 */
  height: 300px;
  /* 设置时钟容器的高度 */
  border-radius: 50%;
  /* 将时钟容器变成圆形 */
  border: 7px solid #ffebdb;
  /* 设置时钟容器的边框样式 */
  background-image: url(./QQ图片20240312133701.jpg);
  /* 设置背景图片 */
  background-size: 50%;
  /* 设置背景图片大小为容器的一半 */
  padding: 20px;
  /* 设置内边距 */
}

.outer-clock-face {
  width: 100%;
  /* 设置外部时钟面板的宽度 */
  height: 100%;
  /* 设置外部时钟面板的高度 */
  border-radius: 100%;
  /* 将外部时钟面板变成圆形 */
  position: relative;
  /* 设置相对定位，以便后续绝对定位的元素相对于该元素定位 */
}

.outer-clock-face::before,
.outer-clock-face::after {
  content: '';
  /* 伪元素的内容为空 */
  width: 10px;
  /* 设置刻度线的宽度 */
  height: 100%;
  /* 设置刻度线的高度 */
  background: green;
  /* 设置刻度线的颜色 */
  display: block;
  /* 将伪元素转换为块级元素 */
  border-radius: 8px;
  /* 设置刻度线的圆角 */
  position: absolute;
  /* 绝对定位，相对于其最近的非 static 祖先元素 */
  left: 50%;
  /* 使刻度线水平居中 */
  transform: translate(-50%);
  /* 使刻度线水平居中 */
}

.outer-clock-face::after {
  transform: rotateZ(90deg);
  /* 将刻度线旋转90度，形成垂直方向的刻度线 */
  transform-origin: center center;
  /* 设置旋转的原点为元素的中心 */
}

.marking {
  width: 3px;
  /* 设置刻度线的宽度 */
  height: 100%;
  /* 设置刻度线的高度 */
  background-color: white;
  /* 设置刻度线的颜色 */
  position: absolute;
  /* 绝对定位，相对于其最近的非 static 祖先元素 */
  left: 50%;
  /* 使刻度线水平居中 */
  transform: translate(-50%);
  /* 使刻度线水平居中 */
  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 {
  width: 80%;
  /* 设置内部时钟面板的宽度 */
  height: 80%;
  /* 设置内部时钟面板的高度 */
  border-radius: 50%;
  /* 将内部时钟面板变成圆形 */
  background-color: green;
  /* 设置内部时钟面板的背景颜色 */
  background-image: url(./5.jpg);
  /* 设置内部时钟面板的背景图片 */
  display: inline-block;
  /* 设置内部时钟面板为行内块级元素 */
  position: relative;
  /* 设置相对定位 */
  left: 50%;
  /* 使内部时钟面板水平居中 */
  bottom: 50%;
  /* 使内部时钟面板垂直居中 */
  transform: translate(-50%, -50%);
  /* 使内部时钟面板水平和垂直居中 */
  z-index: 1;
  /* 设置堆叠顺序，使内部时钟面板位于外部时钟面板之上 */
}

.hand {
  width: 50%;
  /* 设置指针的宽度 */
  height: 6px;
  /* 设置指针的高度 */
  background: red;
  /* 设置指针的颜色 */
  border-radius: 6px;
  /* 设置指针的圆角 */
  position: absolute;
  /* 绝对定位 */
  top: 50%;
  /* 使指针垂直居中 */
  right: 50%;
  /* 使指针水平居中 */
  transform: translateY(-50%) rotateZ(90deg);
  /* 将指针旋转90度，使其水平 */
  transform-origin: 100% center;
  /* 设置旋转的原点为指针的右端中心 */
}

/* 下面的三个类分别定义了时钟的时针、分针和秒针的样式 */
.hour-hand {
  width: 30%;
  /* 设置时针的宽度 */
}

.min-hand {
  width: 40%;
  /* 设置分针的宽度 */
  height: 3px;
  /* 设置分针的高度 */
  color: black;
  /* 设置分针的颜色 */
}

.second-hand {
  width: 45%;
  /* 设置秒针的宽度 */
  height: 2px;
  /* 设置秒针的高度 */
  color: purple;
  /* 设置秒针的颜色 */
}

这段代码是用 CSS 对一个钟表进行样式设计的。作用是这样的：

.clock: 这个类定义了钟表的整体样式，包括宽度、高度、圆角、边框样式、背景图片等。
.outer-clock-face: 这个类定义了钟表的外部时钟面板样式，设置了它的宽度、高度、圆角和相对定位。
.outer-clock-face::before 和 .outer-clock-face::after: 这两个伪元素用来创建钟表外部的刻度线。它们设置了刻度线的宽度、高度、背景颜色、圆角和绝对定位，并通过 transform 属性调整了它们的位置。
.marking: 这个类定义了钟表刻度线的样式，设置了它的宽度、高度、背景颜色、绝对定位和位置调整。
.marking-one、.marking-two、.marking-three、.marking-four: 这些类分别定义了钟表上不同位置的刻度线的旋转角度。
.inner-clock-face: 这个类定义了钟表的内部时钟面板样式，设置了它的宽度、高度、圆角、背景颜色和背景图片，以及相对定位和位置调整。
.hand: 这个类定义了钟表的指针样式，包括宽度、高度、颜色、圆角和绝对定位，通过 transform 属性设置了指针的初始位置和旋转角度。
.hour-hand、.min-hand、.second-hand: 这些类分别定义了时钟的时针、分针和秒针的样式，包括宽度、高度和颜色。

这些样式共同组成了一个钟表的外观，包括外部时钟面板、刻度线、内部时钟面板和指针。

js部分

最后让我们通过js来让时钟动起来吧！

这段代码涉及到以下知识点：

DOM 操作：使用 document.querySelector() 方法获取页面中指定类名的元素，分别获取了时钟的秒针、分针和时针元素。
日期和时间操作：通过 new Date() 获取当前的日期和时间，然后分别提取出当前的秒、分钟和小时。
CSS Transform 属性：利用 style.transform 属性来设置元素的旋转角度，从而实现秒针、分针和时针的旋转效果。
事件监听：使用 window.addEventListener() 方法监听页面加载事件，在页面加载完成后调用 setTime() 方法初始化时钟位置。
定时器 setInterval：使用 setInterval() 方法每隔一秒钟调用一次 setTime() 方法，实现时钟的实时更新效果。
数学计算：通过简单的数学计算得出秒针、分针和时针的旋转角度，其中涉及到了角度和时间的关系，例如秒针每秒钟旋转 6 度（360 度除以 60 秒），分针每分钟旋转 6 度（360 度除以 60 分钟），时针每小时旋转 30 度（360 度除以 12 小时），以及考虑到分钟对时针的影响。

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

// 定义设置时钟位置的函数
function setTime() {
  // 获取当前时间
  const now = new Date()
  const second = now.getSeconds() // 获取当前秒数
  const min = now.getMinutes() // 获取当前分钟数
  const hour = now.getHours() // 获取当前小时数

  // 计算秒针、分针和时针的旋转角度
  const secondsDegrees = second * 6 // 秒针每秒钟旋转 6 度（360 度除以 60 秒）
  const minDegrees = min * 6 + 90 // 分针每分钟旋转 6 度（360 度除以 60 分钟），加 90 度是为了初始位置对齐
  const hourDegrees = ((hour % 12) * 30) + (min / 2) + 90 // 时针每小时旋转 30 度，每分钟旋转 0.5 度，加 90 度是为了初始位置对齐

  // 设置秒针、分针和时针的旋转样式
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`
  minHand.style.transform = `rotate(${minDegrees}deg)`
  hourHand.style.transform = `rotate(${hourDegrees}deg)`
}

// 页面加载时初始化时钟位置
window.addEventListener('load', () => {
  setTime()
})

// 每秒更新时钟位置
setInterval(() => {
  setTime()
}, 1000)

这段代码主要实现了一个动态时钟的效果，具体作用如下：

获取时钟指针元素: 通过 document.querySelector 方法获取了表示时钟的秒针、分针和时针的元素，分别赋值给了 secondHand、minHand 和 hourHand 这三个变量。
定义设置时钟位置的函数: setTime 函数用于根据当前时间计算时钟指针的旋转角度，并将角度应用到对应的元素上，实现时钟指针的动态效果。
获取当前时间: 在 setTime 函数中，通过 new Date() 方法获取了当前时间的对象 now，然后分别获取了当前的秒数、分钟数和小时数。
计算时钟指针的旋转角度: 分别根据当前的秒数、分钟数和小时数计算了秒针、分针和时针应该旋转的角度，具体计算方法如下：
- 秒针：每秒钟旋转 6 度（360 度除以 60 秒）。
- 分针：每分钟旋转 6 度（360 度除以 60 分钟），并且为了初始位置对齐，加了 90 度。
- 时针：每小时旋转 30 度，每分钟旋转 0.5 度（30 度除以 60 分钟），并且为了初始位置对齐，加了 90 度。
设置时钟指针的旋转样式: 使用 style.transform 将计算得到的旋转角度应用到相应的时钟指针元素上，实现了时钟指针的动态旋转效果。
初始化和定时更新: 在页面加载完成时（window.addEventListener('load', ...)），调用 setTime() 函数初始化时钟位置，并且使用 setInterval 函数每隔一秒钟调用一次 setTime() 函数，实现时钟的实时更新效果。

效果图（实际为实时动图）

微信截图_20240420153156.png

项目小结

泰裤啦！通过这个项目，你不仅学到了前端开发的基础知识，还展现了你的技术实力。让我们来总结一下这个电子时钟项目吧：

HTML 结构: 使用 HTML 构建了时钟的基本结构，包括时钟的外框和三个指针（时针、分针、秒针）。
CSS 样式: 利用 CSS 对时钟进行样式美化，包括外框的样式、指针的样式以及时钟的布局。
JavaScript 动态效果: 使用 JavaScript 实现了时钟的动态效果。通过获取当前时间，计算指针的旋转角度，并将旋转角度应用到指针元素上，实现了指针的动态旋转效果。同时，使用 setInterval 函数每隔一秒钟更新一次时钟，使得时钟能够实时显示当前时间。
项目总结: 通过这个项目，你不仅学会了如何利用 HTML、CSS 和 JavaScript 来创建一个简单的电子时钟，还锻炼了对前端开发技术的掌握和运用能力。这个项目展示了你的前端功力，向朋友展示时，他们一定会对你的技术能力赞叹不已！

通过这样一个简单的项目，你不仅提升了自己的技术水平，还展现了自己在前端开发领域的能力和潜力。继续加油，关注我，和我一起探索更多有趣的前端项目吧！