当前位置：物联沃-IOTWORD物联网 > 技术教程 > 【Html.js——功能实现】让时钟转起来（蓝桥杯真题-2156）【合集】
代码收藏家代码收藏家 技术教程

【Html.js——功能实现】让时钟转起来（蓝桥杯真题-2156）【合集】

目录😋

背景介绍

准备步骤

测试效果

挑战需求

要求规定

通关代码✔️

代码解析📑

一、HTML 部分

二、JavaScript 部分

三、工作流程 ▶️

测试结果👍

背景介绍

在 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. 切勿改动源代码中已写好的部分。

要求规定

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

    • 通关代码✔️

    //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');
// 使用 add 方法添加类
oHoure.classList.add('pointer');
oMinute.classList.add('pointer');
oSecond.classList.add('pointer');

const container = document.querySelector('.container');
if (container) {
    container.append(oHoure);
    container.append(oMinute);
    container.append(oSecond);
}

function main() {
    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)`;
}
main();

setInterval(() => {
    main();
}, 1000);

    代码解析📑

    一、HTML 部分

    //index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让时钟转起来</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style01.css">
</head>
<body>
    <div id="warp" >
        <div id="clock" >
            <div id="number">
                <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>
            </div>
            <div class="container">
            </div>
        </div>
    </div>
    <script>
        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>
    <script src="index.js" type="module"></script>
</body>
</html>

    详细解释：

  • <!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 部分

    <script>
    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>
  • 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 文件，且以模块的形式加载。
    • //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');
// 使用 add 方法添加类
oHoure.classList.add('pointer');
oMinute.classList.add('pointer');
oSecond.classList.add('pointer');

const container = document.querySelector('.container');
if (container) {
    container.append(oHoure);
    container.append(oMinute);
    container.append(oSecond);
}
  • 创建三个 div 元素分别代表时针（oHoure）、分针（oMinute）、秒针（oSecond），并设置它们的 id。
  • 为这三个元素添加 pointer 类，可能是为了后续通过 CSS 对它们进行样式控制。
  • 通过 document.querySelector('.container') 找到 class 为 container 的元素，如果找到则将三个指针元素添加到该容器中。
    • //index.js 
function main() {
    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)`;
}
main();

setInterval(() => {
    main();
}, 1000);
  • 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 函数，更新时钟指针的位置，实现时钟转动的效果。

    • 三、工作流程 ▶️

    1. 在 HTML 中，构建了一个时钟的基本结构，包括数字和一个用于放置指针的容器。
    2. 在 JavaScript 中，首先对时钟的数字进行旋转布局，将它们放置在正确的位置。
    3. 创建时针、分针和秒针元素，并添加到 container 元素中。
    4. 定义 main 函数，根据当前时间计算时针、分针和秒针的旋转角度，并设置它们的 transform 属性进行旋转。
    5. 调用 main 函数初始化时钟指针的位置。
    6. 使用 setInterval 每 1 秒调用一次 main 函数，根据当前时间更新时钟指针的旋转角度，从而让时钟不断转动。

    测试结果👍

    作者：Rossy Yan

    物联沃分享整理
    物联沃-IOTWORD物联网 » 【Html.js——功能实现】让时钟转起来（蓝桥杯真题-2156）【合集】

    代码收藏家 普通

    分享到：

    相关推荐

    发表回复