分享程序员开发的那些事...
更新时间：2022-05-10 20:02:03
在本文中，您将学习如何使用 HTML、CSS 和 JavaScript 编程代码制作模拟时钟。在这里我将向您展示如何制作一个简单的模拟时钟。
正如您在上图中所看到的，这是一个非常简单很基础的设计，你可以在这里延伸扩展。这里有时针、分针和秒针，可以查看时间。时钟脉冲中有1 到 12 的数字。时间取决于您设备的时间，即时间将与您设备的时间相同。最初使用 HTML 编程代码来构造这款手表。CSS 代码已用于设计它。最引人注目的工作是 JavaScript 编程代码。当然，要制作这款手表，您需要对HTML、CSS和JavaScript有一个基本的了解。
如果您想了解这款手表的工作原理，可以观看下面的现场演示。当然，我已经把必要的源代码放在那里，如果你愿意，你可以复制它们应用你自己的学习和工作。但是，如果您是初学者并想知道我是如何制作这款手表的，那么您必须按照下面的教程进行操作。
首先，您必须在扩展此手表之前创建一个 HTML 和 CSS 文件。合并 HTML 文件和 CSS 文件。您还可以使用样式标记 ( )将 CSS 代码添加到 HTML 文件。
我使用以下 HTML 代码创建了基本结构。下面的 HTML 已经被用来制作这款手表，基本上就是你在手表中看到的表盘。
<div id='clock'> <!--时钟编号(1,2,....,12)--> <!--时钟指针()--> </div>
步骤2：使用 CSS 代码设计背景
以下 CSS 代码已用于设计上述 HTML 代码。添加了背景颜色并为手表添加了 1 个边框。在这种情况下，我在手表中使用了白色，以便更清晰地看到指针和数字。你可以看到下面的图片，我展示了通过添加这两个编程代码可以获得什么样的结果。
body { background: rgb(13, 186, 230); color: #333; margin-top: 50px; font-family: Helvetica, sans-serif; } #clock { background: #fff; border: 15px solid #222; border-radius: 50%; position: relative; width: 320px; height: 320px; margin: auto; }
上面我们已经基本设计了手表的背景。同时，我们将把 1 到 12 的数字相加。基本上，我们依靠这些数字来查看时间。在本例中，我通过 HTML 编程代码添加了从 1 到 12 的数字。我使用 span 标签（<span>1</span> ,...., <span>12</span>）写了数字。
<ul class='hours'> <li> <span> 1 </span> </li> <li> <span> 2 </span> </li> <li> <span> 3 </span> </li> <li> <span> 4 </span> </li> <li> <span> 5 </span> </li> <li> <span> 6 </span> </li> <li> <span> 7 </span> </li> <li> <span> 8 </span> </li> <li> <span> 9 </span> </li> <li> <span> 10 </span> </li> <li> <span> 11 </span> </li> <li> <span> 12 </span> </li> </ul>
正如您在上面看到的，HTML 代码会写入这些数字。现在我们将设计这些数字并按照指定的距离排列它们。在很多情况下，很多人使用背景图片来不写这些数字。在这里，我使用nth-of-type() CSS 代码精美地排列了这些数字。
现在你脑海中出现的问题可能是我是如何按照完全特定的距离排列这些数字的。让我告诉你 - 我用度数来测量这个距离。我们都知道，如果我们用度数来测量一个圆，它的大小是360度。如果我们将 360 除以 12，则每个角度的值将是 30。
这意味着如果您将每个数字放置在30 度的距离处，数字 12 将在圆形框架中以完全固定的距离找到它的位置。如下所示，我使用第一个数字旋转 30 度。我们通过以 60 度角旋转它来使用相同的数字2。
ul { list-style: none; top: 0; margin: 0; padding: 0; position: absolute; text-align: center; } li { position: absolute; transform-origin: 50% 100%; height: 160px; } .hours { left: 120px; font-size: 23.3333333333px; letter-spacing: -1.6px; line-height: 45px; } .hours li { width: 80px; } .hours span { display: block; } /* 以下代码有助于设计数字 1*/ .hours li:nth-of-type(1) { transform: rotate(30deg); } .hours li:nth-of-type(1) span { transform: rotate(-30deg); } .hours li:nth-of-type(2) { transform: rotate(60deg); } .hours li:nth-of-type(2) span { transform: rotate(-60deg); } /* 以下代码有助于设计数字 3*/ .hours li:nth-of-type(3) { transform: rotate(90deg); } .hours li:nth-of-type(3) span { transform: rotate(-90deg); } .hours li:nth-of-type(4) { transform: rotate(120deg); } .hours li:nth-of-type(4) span { transform: rotate(-120deg); } /* 以下代码有助于设计数字 5*/ .hours li:nth-of-type(5) { transform: rotate(150deg); } .hours li:nth-of-type(5) span { transform: rotate(-150deg); } .hours li:nth-of-type(6) { transform: rotate(180deg); } .hours li:nth-of-type(6) span { transform: rotate(-180deg); } /* 以下代码有助于设计数字 7*/ .hours li:nth-of-type(7) { transform: rotate(210deg); } .hours li:nth-of-type(7) span { transform: rotate(-210deg); } .hours li:nth-of-type(8) { transform: rotate(240deg); } .hours li:nth-of-type(8) span { transform: rotate(-240deg); } /* 以下代码有助于设计数字 9 */ .hours li:nth-of-type(9) { transform: rotate(270deg); } .hours li:nth-of-type(9) span { transform: rotate(-270deg); } .hours li:nth-of-type(10) { transform: rotate(300deg); } .hours li:nth-of-type(10) span { transform: rotate(-300deg); } /* 以下代码有助于设计数字 11*/ .hours li:nth-of-type(11) { transform: rotate(330deg); } .hours li:nth-of-type(11) span { transform: rotate(-330deg); } .hours li:nth-of-type(12) { transform: rotate(360deg); } .hours li:nth-of-type(12) span { transform: rotate(-360deg); }