使用 JavaScript、Html 和 CSS 制作带日期的数字时钟

在本文中，您将学习如何使用 HTML、CSS 和 JavaScript 编程代码创建数字时钟。之前我展示了许多其他类型的时钟设计。手表基本上分为两种：指针式和电子式。

观看现场演示，了解这款数字时钟的工作原理。数字时钟更加美观，制作也更加简单。如果您了解基本的 HTML、CSS 和 JavaScript 编程代码，就可以轻松构建数字时钟。
这款手表基本上是基于 JavaScript 编程代码制作的，几乎没有使用 HTML 和 CSS 代码。在这个数字时钟中，您可以看到从时间到月份的所有信息。首先，您可以在这里看到时间，并可以选择上午 / 下午。

要创建这个数字时钟，首先必须创建一个 HTML 文件。在本例中，我使用了很少的 CSS 代码。因此，即使您不创建单独的 CSS 文件，也可以使用 HTML 文件。

步骤 1：创建数字时钟的基本结构

下面的编程代码是最初用于设计和背景设计这款手表的这款手表的基本HTML和CSS结构。

如果你看过演示，你就会明白，在这个例子中，我使用了一个矩形框，并border: 7px solid rgb(255, 252, 252);在该框周围添加了 border() 。时间和日期可以在该框中看到。box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);该框周围使用了 box-shadow() 。

   <div class="time">

   </div>

     body {
    font-family: "Work Sans", sans-serif;
    margin-top: 150px;
    background: #bbbcbd;
    margin-left: 70px;
}
.time {
    background: rgb(12, 12, 12);
    color: #fff;
    text-align: center;
    width: 500px;
    border: 7px solid rgb(255, 252, 252);
    padding: 8px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 
    rgba(0,0,0,0.12);
}

第 2 步：添加时间、上午/下午、日期选项

这款手表主要有三种类型的选项：时间视图、上午/下午视图和日期视图。以下 HTML 和 CSS 编程代码有助于创建和设计这三个选项。
在本例中，我为每个选项设置了一个specific front size。您可以根据需要更改其大小。

<span class="hms"></span>
        <span class="ampm"></span>
        <br>
        <span class="date"></span>

.hms {
    font-size: 68pt;
    font-weight: 200;
}
.ampm {
    font-size: 22pt;
}
.date {
    font-size: 15pt;
}

步骤 3：添加 JavaScript 代码以激活时间

到目前为止，我们只设计了这款数字手表，现在我们将实现它。你必须了解实现它所需的基本 JavaScript 代码。我会安排大家先看看time and add AM / PM如何使用它。
如果你了解基本的 JavaScript，那么你肯定能理解下面的代码。

 function updateTime() {
  var dateInfo = new Date();

  /* time */
  var hr,
    _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
    sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
    ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM";

  // replace 0 with 12 at midnight, subtract 12 from hour if 13–23
  if (dateInfo.getHours() == 0) {
    hr = 12;
  } else if (dateInfo.getHours() > 12) {
    hr = dateInfo.getHours() - 12;
  } else {
    hr = dateInfo.getHours();
  }
// Add to time format

  var currentTime = hr + ":" + _min + ":" + sec;




  // AM/ PM options 

  document.getElementsByClassName("hms")[0].innerHTML = currentTime;
  document.getElementsByClassName("ampm")[0].innerHTML = ampm;



/*  Add Date options */



// print time and date once, then update them every second
updateTime();
setInterval(function() {
  updateTime()
}, 1000);

步骤 4：激活数字时钟中的日期选项

上面我们已经添加了 JavaScript 代码来实现这一点。这次我们将实现您在上面的演示中看到的那样的日期。在本例中，我们添加了日期、月份等信息。


  /* date */
  var dow = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    month = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    day = dateInfo.getDate();

  // store date
  var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day;

  document.getElementsByClassName("date")[0].innerHTML = currentDate;
};

希望您通过本教程了解我是如何制作这款数字手表的。如果您有任何理解上的困难，当然可以评论You must let us know how you like this design by commenting。

相关文章：

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/code_mystery/digital-clock-with-date-using-javascript-html-css-3epa