JavaScript 30 天编码挑战——第 9 天

前端

2023-09-20 18:22:05

JavaScript 30 天编码挑战——第 9 天：JavaScript 时钟

前言

大家好，欢迎来到 JavaScript 30 天编码挑战的第 9 天！今天，我们将学习如何使用 JavaScript 编写一个简单的数字时钟。这个时钟将显示当前时间，并每秒自动更新。

项目目标

在这个项目中，你将学习到以下知识：

JavaScript 的基本概念，包括变量、函数、事件处理和 setInterval() 方法
如何使用 CSS 来美化时钟的外观

项目步骤

创建一个新的 HTML 文件，并将其命名为 index.html。
在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="clock"></div>

  <script src="script.js"></script>
</body>
</html>

创建一个新的 CSS 文件，并将其命名为 style.css。
在 CSS 文件中添加以下代码：

#clock {
  font-family: Arial, sans-serif;
  font-size: 48px;
  color: #000;
}

创建一个新的 JavaScript 文件，并将其命名为 script.js。
在 JavaScript 文件中添加以下代码：

// 获取时钟元素
const clock = document.getElementById('clock');

// 定义一个函数来格式化时间
const formatTime = (date) => {
  // 获取时、分、秒
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 格式化时间字符串
  const formattedTime = `${hours}:${minutes}:${seconds}`;

  // 返回格式化后的时间字符串
  return formattedTime;
};

// 定义一个函数来更新时钟
const updateClock = () => {
  // 获取当前时间
  const now = new Date();

  // 格式化时间
  const formattedTime = formatTime(now);

  // 将格式化后的时间显示在时钟元素中
  clock.textContent = formattedTime;
};

// 每秒更新一次时钟
setInterval(updateClock, 1000);