前言

我正在参加「豆包MarsCode初体验」征文活动｛玩转AI｝开启智能编程之旅，拿手机大奖

最近可谓是AI软件爆火，比如coze，通义千问，Chatgpt-4o等，现在很多的服务都会加上AI，很荣幸可以成为豆包Marscode体验官，开启智能的编程之旅，在未来也许可以实现用AI完成更多的东西。

先来介绍一下豆包MarsCode吧，这是基于字节跳动豆包大模型打造的更智能、更便捷的开发工具，提供 Cloud IDE 及 AI 编程助手两种使用形态。我用豆包MarsCode写了一个电子时钟，觉得用起来非常好，里面有AI Assistant，当你有什么问题的时候可以直接问，回答的速度也是相当的快，而且只要点击上面的Run就可以直接执行代码，并且会直接在右侧显示出来，不需要再切页面，这一点我觉得非常棒！

动画6.gif

正文

接下来我就来详细介绍一下我用豆包Marscode做的项目——电子时钟吧。

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="./style.css">
</head>
<body>
    <div class="clock">
        <div class="outer-clock-face">
            <div class="marking marking-one"></div>
            <div class="marking marking-two"></div>
            <div class="marking marking-three"></div>
            <div class="marking marking-four"></div>

            <div class="inner-clock-face">
                <div class="hand hour-hand"></div>
                <div class="hand min-hand"></div>
                <div class="hand second-hand"></div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

这段代码是用于创建一个HTML网页，该网页展示了一个时钟。让我们逐步解析这个代码：

<link rel="stylesheet" href="./style.css">: 引入外部CSS文件style.css，用于定义页面的样式。
<body>标签包含了网页的所有可见内容：
- <div class="clock">: 创建一个包含整个时钟的容器。
- <div class="outer-clock-face">: 代表时钟的外圈，通常用来显示小时刻度。
  - <div class="marking marking-one"></div>等：这些标记代表时钟上的小时标记。
- <div class="inner-clock-face">: 代表时钟的内圈，即表盘中心。
  - <div class="hand hour-hand"></div>等：这些元素代表时钟的指针，包括时针、分针和秒针。
<script src="./index.js"></script>: 引入外部JavaScript文件index.js，用于控制时钟的功能，比如更新指针的位置以显示当前时间。

动态的时间显示和指针移动需要通过index.js中的JavaScript代码来实现。样式和动画效果则由style.css文件控制。

css样式

.clock{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 7px solid #ffebdb;
  background-image: url(./bg.jpg);
  background-size: 111%;
  padding: 20px; 
}
.outer-clock-face{
  width: 100%;
  height: 100%;
  border-radius: 90%;
  position: relative;

}
.outer-clock-face::before,
.outer-clock-face::after
{
  content:'';/*伪元素*/
  width: 10px;
  height: 100%;
  background-color: #596235;
  display: block;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.outer-clock-face::after{
  transform: rotateZ(90deg);/*绕z轴旋转90度*/
  transform-origin: center center;/*旋转基点,绝对居中*/
}
.marking{
  width: 3px;
  height: 100%;
  background-color: #596235;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  transform-origin: center center;
}
.marking-one{
  transform: rotateZ(30deg);
}
.marking-two{
  transform: rotateZ(60deg);
}
.marking-three{
  transform: rotateZ(120deg);
}
.marking-four{
  transform: rotateZ(150deg);
}

.inner-clock-face{
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #ffebdb;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  background-image: url(./bg.jpg);
  background-size: 111%;
}
.hand{
  width: 50%;
  height: 6px;
  background-color: red;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) rotateZ(90deg);
  transform-origin: 100% center;
}
.hour-hand{
  width: 30%;
}
.min-hand{
  width: 40%;
  height: 3px;
}
.second-hand{
  width: 45%;
  height: 2px;
  background-color: #b3b3b3;

}

在这里我就简单介绍一下css样式

.clock 设置了时钟的整体样式，它是一个圆形的容器，直径为300px，有边框和背景图，并使用了padding来确保内部内容与边框之间有一定的空间。
.outer-clock-face 是时钟的外围部分，它占用了 .clock 的全部尺寸，并且设置了相对定位，这允许其子元素（如小时标记）相对于它来定位。
这里使用伪元素 ::before 和 ::after 来创建两个垂直的长条作为时钟的装饰，它们位于 .outer-clock-face 的中间位置，并且 ::after 被旋转了90度。
.marking 类定义了小时标记的基本样式，它们是垂直的细条，定位在 .outer-clock-face 中心线上，并通过旋转来指向不同的小时位置。
.marking-one、.marking-two、.marking-three、.marking-four: 这些类分别将小时标记旋转到特定的角度，以指向时钟上的不同小时位置。
.inner-clock-face 是时钟的中心区域，它比外围小，绝对定位在 .clock 的中心，并且有较高的层级，以覆盖外围的某些部分。
.hand 类定义了指针的基础样式，它们是绝对定位的，从中心点伸出，并通过旋转来指向当前时间。
.hour-hand、.min-hand、.second-hand: 这些类分别调整了时针、分针和秒针的长度和颜色，使得它们在视觉上有所区分，更好地指示时间。

js部分

var secondHand = document.querySelector('.second-hand');
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');

function setTime(){
    var now = new Date();//获取当前的时间

    //读取秒
    var seconds = now.getSeconds();
    var secondsDegress = seconds * 6 + 90;
    secondHand.style.transform = `rotate(${secondsDegress}deg)`;

    var mins = now.getMinutes();
    var minsDegress = mins * 6 + 90;
    minHand.style.transform = `rotate(${minsDegress}deg)`;

    var hours = now.getHours();
    var hoursDegress = hours *30+ 90 + (mins/60)*30;
    hourHand.style.transform = `rotate(${hoursDegress}deg)`;
}
setTime();
// 定时器
setInterval(setTime,1000);

这段JavaScript代码负责实时更新HTML时钟界面上的指针位置，以反映当前的实际时间。下面是对代码的详细解释：

获取指针元素：先使用 document.querySelector 方法选择了HTML中具有相应类名的元素，即秒针、分针和时针。这些变量将被用于后续的操作，以便改变它们的样式。
定义函数：用setTime 函数创建一个新的 Date 对象，返回当前的日期和时间。
计算秒针旋转角度：函数获取当前的秒数，每秒钟对应于时钟上6度的旋转角度（因为一圈是360度，共60秒）。但是，由于我们的时钟布局是从12点钟方向开始计算角度的，因此需要加上额外的90度，使0秒时秒针指向12点钟位置。然后，通过修改 secondHand 元素的 transform 样式属性，将其旋转到正确的位置。
计算分针旋转角度：同样的逻辑应用于分针。每分钟同样对应6度的旋转，加上90度的偏移，使0分钟时分针指向12点钟位置。
计算时针旋转角度：对于时针，每个小时对应30度的旋转（360度/12小时），同时考虑到分钟对时针位置的影响，因为时针也会随着分钟的增加而慢慢移动。这里我们计算出小时的旋转角度后，再加上基于当前分钟数的额外旋转量，从而更准确地反映实际时间。
调用函数：最后，setTime 函数被立即调用一次，以设置初始时间。然后，使用 setInterval 函数每秒钟重新调用 setTime，这样就可以持续更新时钟显示，使其保持与实际时间同步。

综上所述，这段代码通过动态地调整HTML元素的CSS transform 属性，实现了时钟指针的实时更新，从而提供了一个准确的时间显示功能。

结语

在本次体验活动中，借助豆包MarsCode的强大功能，我成功地实现了一个生动的电子时钟项目。通过这次实践，我深刻感受到了智能编程工具带来的便捷与创新，豆包MarsCode不仅简化了开发流程，还激发了我对AI技术在编程领域应用的无限想象。感谢豆包MarsCode，让我在这次体验中收获满满，期待未来与它的更多合作！