乐趣区

关于html5:使用-HTMLCSS-和-JavaScript-制作模拟时钟初学者教程

jiezi

在本文中，您将学习如何应用 HTML、CSS 和 JavaScript 编程代码制作模仿时钟。在这里我将向您展现如何制作一个简略的模仿时钟。

正如您在上图中所看到的，这是一个非常简单很根底的设计，你能够在这里延长扩大。这里有时针、分针和秒针，能够查看工夫。时钟脉冲中有 1 到 12 的数字。工夫取决于您设施的工夫，即工夫将与您设施的工夫雷同。最后应用 HTML 编程代码来结构这款手表。CSS 代码已用于设计它。最引人注目的工作是 JavaScript 编程代码。当然，要制作这款手表，您须要对 HTML、CSS 和 JavaScript 有一个根本的理解。

如果您想理解这款手表的工作原理，能够观看上面的现场演示。当然，我曾经把必要的源代码放在那里，如果你违心，你能够复制它们利用你本人的学习和工作。然而，如果您是初学者并想晓得我是如何制作这款手表的，那么您必须依照上面的教程进行操作。

首先，您必须在扩大此手表之前创立一个 HTML 和 CSS 文件。合并 HTML 文件和 CSS 文件。您还能够应用款式标记 (<style>css code</style>)将 CSS 代码增加到 HTML 文件。

步骤 1：创立制作此时钟的根本构造

我应用以下 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;
}

步骤 3：应用 CSS 代码设计背景

下面咱们曾经根本设计了手表的背景。同时，咱们将把 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>

步骤 4：依据特定间隔对数字进行排序

正如您在下面看到的，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);
}

步骤 5：在时钟上增加三个指针（小时、分钟、秒）

至此，咱们曾经实现了手表的根本设计。当初咱们将向手表增加三个指针。当咱们设置一些工夫时，咱们将其设置为小时、分钟和秒。所以在这种状况下，我也将应用三只手来创立以下 HTML 编程代码。

 <div class='hr-wrapper'>
      <div class='hand hr'></div>
    </div>
    <div class='min-wrapper'>
      <div class='hand min'></div>
    </div>
    <div class='sec-wrapper'>
      <div class='hand sec'></div>
    </div>

步骤 6：把每只手都摆好

我应用了以下 CSS，我只设计了时针。当初的问题可能是这些手如何定期旋转。

让我通知你 – 如果你查看你的 CSS，你会明确这些手的一侧的地位是相对的。后果，那个方向放弃齐全稳固，另一侧持续旋转。

.hr-wrapper, .min-wrapper, .sec-wrapper {
  position: absolute;
  width: 320px;
  height: 320px;
}

.hand {
  position: absolute;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hr {
  background: #222;
  left: 152px;
  width: 13px;
  height: 105px;
  border-radius: 10px;
  animation: rotateHand 43200s linear infinite;
}
.hr:after {
  background: #222;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 16px;
}

我应用以下代码来设计分针。让我通知你一件事，如果你想减少这些切口的长度和高度，你能够很容易地做到。

.min {
  background: #222;
  left: 155px;
  width: 9px;
  height: 125px;
  border-radius: 8px;
  animation: rotateHand 3600s linear infinite;
}
.min:after {
  background: #222;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  bottom: -8px;
  width: 9px;
  height: 16px;
}

我曾经应用以下代码进行了二手设计。您会留神到，我已在此处批示应用 @keyframes rotateHand 旋转此秒针。

.sec {
  background: #d00;
  left: 156.5px;
  width: 5px;
  height: 132px;
  border-radius: 8px;
  animation: rotateHand 60s linear infinite;
}
.sec:after {
  background: #d00;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  bottom: -3.5px;
  width: 5px;
  height: 7px;
}

@keyframes rotateHand {
  to {transform: rotate(1turn);
  }
}

步骤 7：增加 JavaScript 代码以激活时钟

到目前为止，咱们只设计了它。当初咱们将激活这个手表。

 // 获取以后工夫
var dateInfo = new Date();
var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() - 12 : dateInfo.getHours(),
  min = dateInfo.getMinutes(),
  sec = dateInfo.getSeconds(),
  milsec = dateInfo.getMilliseconds();

步骤 8：确定手动时钟的旋转

我先通知过你，手表的指针一部分是固定的，另一部分是旋转的。该旋转将由 JavaScript 代码管制。

正如我之前所说，一小时等于 30 度（1 hr = 30°），一分钟等于 6 度（1 min = 6°），一秒等于 6 度（1 sec = 6°）。

我将手动将以后时钟乘以 30 以依据指定工夫旋转时钟的切割。假如咱们减少了分钟数，以将时钟指针放弃在更整洁和准确的地位。
例如，如果我通知你，如果时钟以后在 03:30，那么依据规定，时针将在 90 度。在这种状况下，永远不会显示确切的工夫。因为咱们晓得在 03:30 的状况下，时钟的指针将在 3 和 4 之间的某个地位。这意味着指针将略高于 90 度。

为了确定这件事，咱们增加了时针到分针的间隔。这样时钟的指针就会在正确的地位。我曾经批示了雷同的分钟和秒针旋转办法。
如果您理解根本的 JavaScript 编程代码，那么心愿您能了解这种设计。

var hrAngle = hr * 30 + (min * 6 / 12),
    minAngle = min * 6 + (sec * 6 / 60),
    secAngle = sec * 6 + (milsec * 0.36 / 1000);

// 设置手部包装纸的初始角度
function setAngle(wrapper, angle) {document.querySelector("." + wrapper).style.transform = "rotate(" + angle + "deg)";
}
setAngle("hr-wrapper", hrAngle);
setAngle("min-wrapper", minAngle);
setAngle("sec-wrapper", secAngle);

心愿通过本文，您曾经学会了如何应用 HTML、CSS 和 JavaScript 代码制作这个时钟。顶部的第二种时钟我下一篇文章发具体教程

代码下载

CSDN 积分下载
https://download.csdn.net/download/qq_44273429/19694888

或者关注作者公众号【海拥】回复【进群】，收费下载 CSDN 资源和百度文库资源

🛬 wuhu ! 腾飞 !

心愿通过本文，您曾经学会了如何应用 HTML、CSS 和 JavaScript 制作模仿时钟(初学者教程)。须要残缺源码能够关注公众号【海拥】回复【代码】

我曾经写了很长一段时间的技术博客，这是我的一篇 Web 应用程序教程。我喜爱通过文章分享技术与高兴。您能够拜访我的博客：思否 - 海拥 以理解更多信息。心愿你们会喜爱！😊

💌 欢送大家在评论区提出意见和倡议！💌

如果你真的从这篇文章中学到了一些新货色，喜爱它，珍藏它并与你的小伙伴分享。🤗最初，不要忘了❤或📑反对一下哦。

退出移动版