#用ai编程助手生成一个用html/css/js案例效果会是什么样？#

#想实现一个前端“带时针/分针/秒针的钟表”效果#
#分别问不同的“编程助手”看怎么实现、实现效果怎么样？#

#给不同的编程助手问相同的问题：

“基于当前时间用html、js、css写一个UI好看的，带时针、分针、秒针旋转效果的12小时制钟表”

#编程助手有：文心一言（文心大模型3.5）、通义千问（2.5）、CodeGeeX（智普Ai）、豆包MarsCode、FittenCode 
 

一、文心一言（文心大模型3.5）

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12小时制钟表</title>
    <style>
        body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f0f0f0;
    font-family: Arial, sans-serif;
}

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    border: 20px solid #333;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-10px); /* 微调以居中 */
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 4px;
    background: #333;
    transform-origin: bottom;
    transition: transform 0.05s cubic-bezier(0.4, 2.3, 0.3, 1);
}

.hour-hand {
    height: 90px;
    background: #8b4513; /* 棕色 */
}

.minute-hand {
    height: 130px;
    background: #555; /* 深灰色 */
}

.second-hand {
    height: 150px;
    background: red; /* 红色 */
}

.numbers {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.numbers div {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #333;
}

.numbers div:nth-child(1) { transform: rotate(0deg) translate(-50%, -80%); }
.numbers div:nth-child(2) { transform: rotate(30deg) translate(-50%, -80%); }
.numbers div:nth-child(3) { transform: rotate(60deg) translate(-50%, -80%); }
.numbers div:nth-child(4) { transform: rotate(90deg) translate(-50%, -80%); }
.numbers div:nth-child(5) { transform: rotate(120deg) translate(-50%, -80%); }
.numbers div:nth-child(6) { transform: rotate(150deg) translate(-50%, -80%); }
.numbers div:nth-child(7) { transform: rotate(180deg) translate(-50%, -80%); }
.numbers div:nth-child(8) { transform: rotate(210deg) translate(-50%, -80%); }
.numbers div:nth-child(9) { transform: rotate(240deg) translate(-50%, -80%); }
.numbers div:nth-child(10) { transform: rotate(270deg) translate(-50%, -80%); }
.numbers div:nth-child(11) { transform: rotate(300deg) translate(-50%, -80%); }
.numbers div:nth-child(12) { transform: rotate(330deg) translate(-50%, -80%); }

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
    </style>
</head>
<body>
    <div class="clock">
        <div class="face">
            <div class="hand hour-hand"></div>
            <div class="hand minute-hand"></div>
            <div class="hand second-hand"></div>
            <div class="numbers">
                <!-- 数字将通过CSS生成 -->
            </div>
        </div>
        <div class="center"></div>
    </div>
    <script>
     function setClock() {
        const now = new Date();
        const sec = now.getSeconds();
        const min = now.getMinutes();
        const hr = now.getHours();
    
            let secDeg = ((sec / 60) * 360) + 90;
            let minDeg = ((min / 60) * 360 + (sec / 60) * 6) + 90;
            let hrDeg = ((hr / 12) * 360 + (min / 60) * 30) + 90;
    
        document.querySelector('.second-hand').style.transform = `rotate(${secDeg}deg)             translateX(-50%)`;
    document.querySelector('.minute-hand').style.transform = `rotate(${minDeg}deg) translateX(-50%)`;
    document.querySelector('.hour-hand').style.transform = `rotate(${hrDeg}deg) translateX(-50%)`;
}

setInterval(setClock, 1000);
setClock(); // 初始调用以确保页面加载时时间准确
    </script>
</body>
</html>

二、通义千问（2.5）

效果：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>12小时制老式钟表</title>
<style>
    * {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.clock-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.clock-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #e0e0e0, #c0c0c0);
  box-shadow: 0 0 10px rgba(0,0,0,0.2), inset 0 0 10px rgba(0,0,0,0.1);
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  z-index: 1;
  border-radius: 50% / 10%;
}

.hour-hand {
  width: 6px;
  height: 30%;
  background: black;
  z-index: 2;
}

.minute-hand {
  width: 4px;
  height: 50%;
  background: black;
  z-index: 3;
}

.second-hand {
  width: 2px;
  height: 65%;
  background: red;
  z-index: 4;
}

.numbers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rotation));
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1;
}
</style>
</head>
<body>
<div class="clock-container">
  <div class="clock-face">
    <div class="numbers">
      <span class="number" style="--rotation: 30deg;">12</span>
      <span class="number" style="--rotation: 60deg;">1</span>
      <span class="number" style="--rotation: 90deg;">2</span>
      <span class="number" style="--rotation: 120deg;">3</span>
      <span class="number" style="--rotation: 150deg;">4</span>
      <span class="number" style="--rotation: 180deg;">5</span>
      <span class="number" style="--rotation: 210deg;">6</span>
      <span class="number" style="--rotation: 240deg;">7</span>
      <span class="number" style="--rotation: 270deg;">8</span>
      <span class="number" style="--rotation: 300deg;">9</span>
      <span class="number" style="--rotation: 330deg;">10</span>
      <span class="number" style="--rotation: 360deg;">11</span>
    </div>
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>
<script>
    function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours() % 12;  // 转换为12小时制

  // 计算每个指针的角度
  const secondsDeg = ((seconds / 60) * 360) + 90;  // 每秒增加6度
  const minutesDeg = (((minutes + seconds / 60) / 60) * 360) + 90;  // 分钟+秒/60转换为度数
  const hoursDeg = ((((hours + minutes / 60) / 12) * 360) + 90);  // 小时+分钟/60转换为度数，除以12因为是12小时制

  // 更新指针位置
  document.querySelector('.second-hand').style.transform = `rotate(${secondsDeg}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minutesDeg}deg)`;
  document.querySelector('.hour-hand').style.transform = `rotate(${hoursDeg}deg)`;
}

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

// 初始化时调用一次
updateClock();
</script>
</body>
</html>

三、CodeGeeX（智普Ai）

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<style>
.clock {
 position: relative;
 width: 200px;
 height: 200px;
 border: 5px solid #333;
 border-radius: 50%;
 margin: 50px auto;
 background: #fff;
}
.hand {
 position: absolute;
 bottom: 50%;
 left: 50%;
 width: 50%;
 background: #333;
 transform-origin: 0% 0%;
 transform: translateX(-50%);
}
.hour-hand {
 height: 5px;
}
.minute-hand {
 height: 3px;
}
.second-hand {
 height: 2px;
 background: red;
}
.center-point {
 position: absolute;
 width: 10px;
 height: 10px;
 background: #333;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="clock">
 <div class="hand hour-hand"></div>
 <div class="hand minute-hand"></div>
 <div class="hand second-hand"></div>
 <div class="center-point"></div>
</div>
<script>
function updateClock() {
 const now = new Date();
 const seconds = now.getSeconds();
 const minutes = now.getMinutes();
 const hours = now.getHours() % 12; // Convert to 12-hour format
 const secondDegree = ((seconds / 60) * 360) + 90;
 const minuteDegree = ((minutes / 60) * 360) + (seconds / 60 * 6) + 90;
 const hourDegree = ((hours / 12) * 360) + (minutes / 60 * 30) + 90;
 document.querySelector('.second-hand').style.transform = `rotate(${secondDegree}deg)`;
 document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegree}deg)`;
 document.querySelector('.hour-hand').style.transform = `rotate(${hourDegree}deg)`;
}
setInterval(updateClock, 1000);
updateClock(); // Initialize clock position without delay
</script>
</body>
</html>

四、豆包MarsCode

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆包MarsCode</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #clock {
            width: 300px;
            height: 300px;
            border: 10px solid #333;
            border-radius: 50%;
            position: relative;
        }

        #hour, #minute, #second {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: bottom center;
        }

        #hour {
            width: 6px;
            height: 40%;
            background-color: #333;
            transform: translate(-50%, -100%);
        }

        #minute {
            width: 4px;
            height: 50%;
            background-color: #666;
            transform: translate(-50%, -100%);
        }

        #second {
            width: 2px;
            height: 60%;
            background-color: #999;
            transform: translate(-50%, -100%);
        }

        #center {
            width: 15px;
            height: 15px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
        <div id="center"></div>
    </div>
    <script>
        function updateClock() {
            const now = new Date();
            const hour = now.getHours() % 12;
            const minute = now.getMinutes();
            const second = now.getSeconds();

            const hourDeg = (hour * 30) + (minute * 0.5);
            const minuteDeg = (minute * 6) + (second * 0.1);
            const secondDeg = second * 6;

            document.getElementById('hour').style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
            document.getElementById('minute').style.transform = `translate(-50%, -100%) rotate(${minuteDeg}deg)`;
            document.getElementById('second').style.transform = `translate(-50%, -100%) rotate(${secondDeg}deg)`;
        }

        setInterval(updateClock, 1000);
    </script>
</body>
</html>

五、FittenCode 

效果：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老式钟表</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to bottom right, #87CEFA, #B0E0E6);
            font-family: 'Arial', sans-serif;
        }
        .clock {
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, #fff, #f0f0f0);
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            transition: transform 0.5s ease-in-out;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        .hour {
            width: 8px;
            height: 60px;
            background: #8B4513;
        }
        .minute {
            width: 6px;
            height: 80px;
            background: #4682B4;
        }
        .second {
            width: 2px;
            height: 90px;
            background: #FF4500;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            background: #8B4513;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        .number {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        /* 定位数字 */
        .number[data-number="12"] { top: 15px; left: 135px; }
        .number[data-number="1"]  { top: 40px; left: 205px; }
        .number[data-number="2"]  { top: 75px; left: 250px; }
        .number[data-number="3"]  { top: 135px; left: 250px; }
        .number[data-number="4"]  { top: 205px; left: 205px; }
        .number[data-number="5"]  { top: 250px; left: 135px; }
        .number[data-number="6"]  { top: 250px; left: 50px; }
        .number[data-number="7"]  { top: 205px; left: 15px; }
        .number[data-number="8"]  { top: 135px; left: 15px; }
        .number[data-number="9"]  { top: 75px; left: 50px; }
        .number[data-number="10"] { top: 40px; left: 80px; }
        .number[data-number="11"] { top: 15px; left: 135px; }
    </style>
</head>
<body>
    <div class="clock" id="clock">
        <div class="hand hour" id="hour"></div>
        <div class="hand minute" id="minute"></div>
        <div class="hand second" id="second"></div>
        <div class="center"></div>
        <div class="number" data-number="12">12</div>
        <div class="number" data-number="1">1</div>
        <div class="number" data-number="2">2</div>
        <div class="number" data-number="3">3</div>
        <div class="number" data-number="4">4</div>
        <div class="number" data-number="5">5</div>
        <div class="number" data-number="6">6</div>
        <div class="number" data-number="7">7</div>
        <div class="number" data-number="8">8</div>
        <div class="number" data-number="9">9</div>
        <div class="number" data-number="10">10</div>
        <div class="number" data-number="11">11</div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours() % 12;
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const hourDeg = (hours + minutes / 60) * 30; // 每小时30度
            const minuteDeg = (minutes + seconds / 60) * 6; // 每分钟6度
            const secondDeg = seconds * 6; // 每秒6度

            document.getElementById('hour').style.transform = `rotate(${hourDeg}deg)`;
            document.getElementById('minute').style.transform = `rotate(${minuteDeg}deg)`;
            document.getElementById('second').style.transform = `rotate(${secondDeg}deg)`;
        }

        setInterval(updateClock, 1000);
        updateClock(); // 初始化显示当前时间
    </script>
</body>
</html>

从实现逻辑看，这几个编程助手在实现方法上大体相似：

都使用了 CSS 的 transform 属性来旋转时针、分针和秒针，JavaScript 的 setInterval 函数每秒更新一次时间。

就依这个前端案例看，UI效果完整度 FittenCode 实现的案例比较好，可以加以改造使用……

# 前端 # ui
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

AI编程能力边界探索：基于 Claude Code 的 Spec Coding 项目实战｜得物技术

10 天实战、2.5 万行净增代码、36% 研发提效，一场基于 Claude Code 的 Spec Coding 深度实践。通过 “约束 + 示范 + 视觉” 三层规范体系，我们摸清 AI 编程的真实能力边界，拆解结构化工作流如何消除不确定性，重构 AI 时代开发者的核心竞争力。

avatar AI编程社区
cover

用了两年国产 AI 编程工具，换 Claude Code 三天后，我彻底不想回去了

avatar AI编程社区
cover

从 Spec Coding 到规范驱动 —— AI 编程的确定性边界

avatar AI编程社区