资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

让时钟转起来

创作时间:

作者:

@小白创作中心

让时钟转起来

引用

CSDN

https://blog.csdn.net/lowkeyyh/article/details/145271636

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

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

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

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

测试效果

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

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

具体操作参考下图：

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

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

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

挑战需求

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

要求规定

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

通关代码

const oHoure = document.createElement('div');
const oMinute = document.createElement('div');
const oSecond = document.createElement('div');
oHoure.setAttribute('id', 'houre');
oMinute.setAttribute('id','minute');
oSecond.setAttribute('id','second');
oHoure.classList.add('pointer');
oMinute.classList.add('pointer');
oSecond.classList.add('pointer');
const container = document.querySelector('.container');
    container.append(oHoure);
    container.append(oMinute);
    container.append(oSecond);
    const nowTime = new Date();
    const nowHoure = nowTime.getHours();
    const nowMinute = nowTime.getMinutes();
    const nowSecond = nowTime.getSeconds();
    const houreDeg = (nowMinute / 60) * 30;
    const minuteDeg = (nowSecond / 60) * 6;
    const secondDeg = nowSecond * 6;
    oHoure.style.transform = `rotate(${nowHoure * 30 + houreDeg}deg)`;
    oMinute.style.transform = `rotate(${nowMinute * 6 + minuteDeg}deg)`;
    oSecond.style.transform = `rotate(${secondDeg}deg)`;

代码解析

HTML 部分

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style01.css">
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
const oNumber=document.getElementById("number");
const oDiv=oNumber.getElementsByTagName("div");
const oSpan=oNumber.getElementsByTagName("span");
for(let i=0;i<oDiv.length;i++){
    oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
for(let j=0;j<oSpan.length;j++){
    oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";
<script src="index.js" type="module"></script>

详细解释：

<!DOCTYPE html>：声明这是一个HTML5文档。
<html lang="en">：定义HTML文档的语言为英语。
<head>：包含文档的元数据。
- <meta charset="UTF-8">：指定文档使用UTF-8字符编码。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口的属性，以适应不同设备的屏幕宽度，并设置初始缩放比例为1.0。
- <title>让时钟转起来</title>：设置网页的标题。
- <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style01.css">：引入外部样式表，为页面添加样式。
<body>：包含页面的主体内容。
- <div id="warp">：一个具有id为warp的容器元素，可能用于包裹整个时钟。
  - <div id="clock">：一个具有id为clock的元素，可能是时钟的主要显示区域。
    - <div id="number">：可能是用于显示时钟上的数字的容器。
      - 包含多个<div><span>X</span></div>：其中X是从1到12的数字，这些元素可能是时钟的数字标记。
    - <div class="container">：一个具有class为container的元素，可能是用于容纳时钟指针的容器。

JavaScript 部分

const oNumber = document.getElementById("number");
const oDiv = oNumber.getElementsByTagName("div");
const oSpan = oNumber.getElementsByTagName("span");
for (let i = 0; i < oDiv.length; i++) {
    oDiv[i].style.WebkitTransform = "rotate(" + i * 30 + "deg)";
for (let j = 0; j < oSpan.length; j++) {
    oSpan[j].style.WebkitTransform = "rotate(" + j * -30 + "deg)";

const oNumber = document.getElementById("number");：通过id获取到id为number的元素，存储在oNumber变量中。
const oDiv = oNumber.getElementsByTagName("div");：获取oNumber元素内的所有div元素，存储在oDiv变量中。
const oSpan = oNumber.getElementsByTagName("span");：获取oNumber元素内的所有span元素，存储在oSpan变量中。
第一个for循环：将oDiv元素集合中的每个元素按i * 30度旋转，可能是为了将数字元素旋转到时钟的不同位置。
第二个for循环：将oSpan元素集合中的每个元素按j * -30度旋转，可能是为了调整数字的显示方向，使其正确显示在时钟上。

<script src="index.js" type="module"></script>

引入外部的index.js文件，且以模块的形式加载。

const oHoure = document.createElement('div');
const oMinute = document.createElement('div');
const oSecond = document.createElement('div');
oHoure.setAttribute('id', 'houre');
oMinute.setAttribute('id','minute');
oSecond.setAttribute('id','second');
oHoure.classList.add('pointer');
oMinute.classList.add('pointer');
oSecond.classList.add('pointer');
const container = document.querySelector('.container');
    container.append(oHoure);
    container.append(oMinute);
    container.append(oSecond);

创建三个div元素分别代表时针（oHoure）、分针（oMinute）、秒针（oSecond），并设置它们的id。
为这三个元素添加pointer类，可能是为了后续通过CSS对它们进行样式控制。
通过document.querySelector('.container')找到class为container的元素，如果找到则将三个指针元素添加到该容器中。

    const nowTime = new Date();
    const nowHoure = nowTime.getHours();
    const nowMinute = nowTime.getMinutes();
    const nowSecond = nowTime.getSeconds();
    const houreDeg = (nowMinute / 60) * 30;
    const minuteDeg = (nowSecond / 60) * 6;
    const secondDeg = nowSecond * 6;
    oHoure.style.transform = `rotate(${nowHoure * 30 + houreDeg}deg)`;
    oMinute.style.transform = `rotate(${nowMinute * 6 + minuteDeg}deg)`;
    oSecond.style.transform = `rotate(${secondDeg}deg)`;

function main()：定义一个main函数。
- const nowTime = new Date();：创建一个新的Date对象，获取当前时间。
- const nowHoure = nowTime.getHours();：获取当前的小时数。
- const nowMinute = nowTime.getMinutes();：获取当前的分钟数。
- const nowSecond = nowTime.getSeconds();：获取当前的秒数。
- const houreDeg = (nowMinute / 60) * 30;：计算时针的旋转角度，根据分钟数计算时针的偏移角度。
- const minuteDeg = (nowSecond / 60) * 6;：计算分针的旋转角度，根据秒数计算分针的偏移角度。
- const secondDeg = nowSecond * 6;：计算秒针的旋转角度，秒针每秒旋转6度。
- oHoure.style.transform = rotate (${nowHoure * 30 + houreDeg} deg)``：将时针旋转到相应的角度。
- oMinute.style.transform = rotate (${nowMinute * 6 + minuteDeg} deg)``：将分针旋转到相应的角度。
- oSecond.style.transform = rotate (${secondDeg} deg)``：将秒针旋转到相应的角度。
main();：调用main函数，初始化时钟指针的位置。
setInterval(() => { main(); }, 1000);：每1000毫秒（即1秒）调用一次main函数，更新时钟指针的位置，实现时钟转动的效果。