Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 JavaScript 的简单数字时钟，带日期显示

使用 JavaScript 的简单数字时钟，带日期显示

本文将介绍如何使用 JavaScript、 HTML 和 CSS 创建一个带有日期显示的简单数字时钟。之前我分享过更多制作数字时钟的方法。这个数字时钟是借助 Glassmorphism 设计语言创建的。

这款电子表采用 HTML、CSS 和 JavaScript 技术设计而成，与普通电子表略有不同，因为它可以同时显示日期和时间。

您可以观看在线演示来了解它的工作原理。如果您看一下上面的图片，就会发现有一个小方框，日期就显示在那里。

时间和日期将使用 New Date 方法从您的设备接收。然后，我使用 setInterval 指示每秒更新所有这些计算结果和时间。

第一步：设计网页

我首先使用以下 HTML 和 CSS 代码在网页上创建了两个圆圈。这些圆圈是 Glassmorphism 设计的一部分。如果您愿意，可以忽略这个彩色圆圈。

<div class="background">
  <div class="shape"></div>
  <div class="shape"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
    background-color: #080710;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

设计网页
首先，定义了一个包含这两个圆的区域。该区域的宽度为 430 像素height: 520px。圆的高度width 140px为，border-radius: 50%用于确保圆是完整的圆形。

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 140px;
    width: 140px;
    position: absolute;
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

现在这两个圆已经放置在某个位置，而且两种情况下我们都使用了不同的值linear-gradient colors。您可以根据需要调整圆的位置。

.shape:first-child{
    background: linear-gradient(
        #1845ad,
        #23a2f6
    );
    left: -80px;
    top: 70px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -80px;
    bottom: 80px;
}
Enter fullscreen mode Exit fullscreen mode

两个圆圈

步骤二：数字时钟的基本结构

现在数字时钟的基本结构已经创建完成。Backdrop-filter: blur (10px)已使用该技术模糊了时钟的背景。

<div class="alarm-clock">

</div>
Enter fullscreen mode Exit fullscreen mode 
.alarm-clock {
  position: relative;
  padding: 7px;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  background-color: rgba(255,255,255,0.17);
}
Enter fullscreen mode Exit fullscreen mode

📌📌记住，时间很重要cannot be seen without JavaScript。我使用下图来理解使用上述HTML和CSS后将会发生哪些变化。

数字钟的基本结构

步骤 3：添加代码以查看时间

现在我已经添加了显示时间所需的 HTML 代码。小时、分钟和秒都显示在这里。每个句点之间都使用了冒号，这样看起来更美观一些。

<div class="time">
   <span class="hours"></span>
   <span class="colon"> :</span>
   <span class="minutes"></span>
   <span class="colon"> : </span>
   <span class="seconds"></span>
</div>
Enter fullscreen mode Exit fullscreen mode 
.alarm-clock .time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px 19px;
  background-color: rgba(255,255,255,0.13);
  border-radius: 10px;
  font-family: "Orbitron", sans-serif;
  font-size: 62px;
}
.alarm-clock .time span {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #09ecf8;
  text-shadow: 0 0 15px #375f08;
  line-height: 1.75;
  margin-bottom: 10px;

}
Enter fullscreen mode Exit fullscreen mode

步骤 4：设计冒号并添加动画

现在冒号已经设计完成，动画效果也已添加。同时，我使用了一个动画来帮助显示和隐藏一些时间间隔。

.alarm-clock .time span.colon {
  width: 14px;
  padding: 15px;
  text-align: center;
  animation: blink 2s infinite;
}
Enter fullscreen mode Exit fullscreen mode 
@keyframes blink {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

📌📌记住，时间很重要cannot be seen without JavaScript。我使用下图来理解使用上述HTML和CSS后将会发生哪些变化。

添加代码以查看时间

步骤 5：添加代码以查看日期

现在我们已经创建了一个可以在数字时钟上显示日期的地方。正如我之前所说，这里可以显示月份、日期和年份。我使用 HTML 和 CSS 代码创建了它的基本结构，之后借助 JavaScript 实现了它的功能。

<div class="date">
  <span class="month"></span>
  <span class="day"></span>,
  <span class="year"></span>
</div>
Enter fullscreen mode Exit fullscreen mode 
.alarm-clock .date {
  position: absolute;
  bottom: 1px;
  left: 50%;
 background-color: rgba(255,255,255,0.27);
  padding: 8px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  font-family: sans-serif;
  text-transform: uppercase;
  transform: translateX(-50%);
  z-index: 9;
}
Enter fullscreen mode Exit fullscreen mode

📌📌 请记住时间和日期cannot be seen without JavaScript。我使用下图来说明使用上述 HTML 和 CSS 代码后会发生哪些变化。

添加代码以查看日期

步骤 6：使用 JavaScript 激活带日期显示的数字时钟

以上我们已经设计好了如何创建一个带日期显示的数字时钟。现在是时候用 JavaScript 来实现它了。为此，您必须具备 JavaScript 的基础知识。

首先，一些类函数被赋予了常量。因为我无法直接在 JavaScript 中使用 ID 函数，所以需要定义一个全局常量。

const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');

const month = document.querySelector('.month');
const day = document.querySelector('.day');
const year = document.querySelector('.year');
Enter fullscreen mode Exit fullscreen mode

下面这个函数里我会添加所有的计算。换句话说，我会在这个函数里添加所有增加时钟时间所需的计算。

function setDate() {

}
Enter fullscreen mode Exit fullscreen mode

正如我之前提到的，这里使用的日期和时间信息将使用 JavaScript 的方法从设备中收集New Date。

  const now = new Date();
Enter fullscreen mode Exit fullscreen mode

现在，月份、日期和年份的最新信息已被收集并存储在不同的常量中。

  const mm = now.getMonth();
  const dd = now.getDate();
  const yyyy = now.getFullYear();
Enter fullscreen mode Exit fullscreen mode

同样地，小时、分钟和秒从设备中取出，并存储在某个常量中。

  const secs = now.getSeconds();
  const mins = now.getMinutes();
  const hrs = now.getHours();
Enter fullscreen mode Exit fullscreen mode

现在我已经将所有月份的名称存储在一个名为 的常量中"monthName"。

  const monthName = [
  'January', 'February', 'March', 'April',
  'May', 'June', 'July', 'August', 'September',
  'October', 'November', 'December'];
Enter fullscreen mode Exit fullscreen mode

现在，通过一些条件，我成功地在时间前面加了一个零time below 10。当时间小于 10 时，会在该时间前面加一个零。这样，时间就变成了两个数字。

然后，这些时间点被安排在网页上，并使用 innerHTML 进行显示。innerHTML 有助于在网页内显示任何内容。

我在这里设定了一个条件：如果时间小于 10，则在时间后加一个零，然后将该零后的时间显示在网页上。然后我使用 else 语句设定了另一个条件：如果时间等于 10 not below 10，则网页上可以直接显示该时间。

  if (hrs < 10) {
    hours.innerHTML = '0' + hrs;
  } else {
    hours.innerHTML = hrs;
  }

  if (secs < 10) {
    seconds.innerHTML = '0' + secs;
  } else {
    seconds.innerHTML = secs;
  }

  if (mins < 10) {
    minutes.innerHTML = '0' + mins;
  } else {
    minutes.innerHTML = mins;
  }
Enter fullscreen mode Exit fullscreen mode

现在，利用相同的 innerhtml，网页上已经排列好了月份、日期和年份的信息。

  month.innerHTML = monthName[mm];
  day.innerHTML = dd;
  year.innerHTML = yyyy;
Enter fullscreen mode Exit fullscreen mode

正如我之前提到的，所有这些计算结果都存储在一个名为“setdate”的函数中。现在，该函数已被设置为每秒更新一次1000 milliseconds。

setInterval有助于在特定时间段后更新任何信息。这将每秒更新一次所有这些计算，我们将看到时间每秒都在变化。

setInterval(setDate, 1000);
Enter fullscreen mode Exit fullscreen mode

使用 JavaScript 显示日期的数字时钟<br>
希望通过本教程，您已经学会了如何使用 JavaScript 创建带日期显示的数字时钟。我之前还制作过许多其他类型的数字手表。

如果您在制作这个JavaScript 数字时钟时遇到任何困难，请在评论区留言。您可以下载创建这个带日期显示的 JavaScript 数字时钟所需的源代码。

相关帖子：

  1. 响应式页脚 HTML CSS
  2. 海德拉巴的寄宿学校
  3. 使用 JavaScript 的简单秒表
  4. 海德拉巴的国际学校
  5. JavaScript 密码生成器
  6. 使用 HTML 和 CSS 的侧边栏菜单
文章来源：https://dev.to/shantanu_jana/simple-digital-clock-with-date-using-javascript-41c
[C++] 从零开始编写一个简单的...
未来……