让时钟转起来

作者:江月迟迟

发表于:2024-12-10

字数统计:602 字

预计阅读3分钟

背景介绍

在 JavaScript 中，对于时间的处理，往往需要借助于 Date 对象操作来完成。但是，仅仅使用它来获取时间是无法满足日常业务需求的。例如，有时候我们需要将时间从枯燥的数字转化为更能吸引用户眼球的动态时钟。我们该如何实现呢？

在本节挑战中，我们就遇到了类似情况：：

上图中的动态时钟效果，是通过 HTML 和 CSS 结合 JS 中的 Date 对象来实现的。

本节挑战的代码中，还未实现秒针转动的效果。希望你能观察代码的特点，让秒针转起来。

准备步骤

开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：

wget https://labfile.oss.aliyuncs.com/courses/9203/01.zip && unzip 01.zip && rm 01.zip

具体操作参考下图：

测试效果

可通过如下步骤测试效果：

1. 右键 01/index.html，选择 Open with Live Server。
2. 点击右侧的 Web 服务。

具体操作参考下图：

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 01 文件夹：

之后，你将看到如下效果：

请根据下述挑战要求，通过修改 01/index.js 文件，达到让秒针转动起来的效果。

挑战需求

1. 秒针的旋转方向应为顺时针。
2. 秒针每次旋转的角度为 6deg，且需与当前时间对应。
3. 切勿改动源代码中已写好的部分。

要求规定

1. 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
2. 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
3. 不要篡改已提供的基础项目中的 id 和 class 等属性值及 DOM 结构，以免造成检测失败。

总通过次数: 1359 | 总提交次数: 1366 | 通过率: 99.5%

难度: 简单 标签: CSS3, Web 前端

题解

oSecond.style.transform = `rotate(${nowSecond * 6}deg)`