🕰️ JS 和 CSS 时钟：前端三权分立的实战应用在现代前端开发中，结构、样式、行为分离是一个非常重要的设计原则。

在现代前端开发中，结构、样式、行为分离 是一个非常重要的设计原则。今天我们就通过一个经典的“CSS + JS 时钟”项目，来深入理解前端的“三权分立”思想。

📌 一、项目背景

这个时钟项目并不是为了“古法编程”而存在，而是通过一个简单的交互场景，帮助我们掌握以下核心概念：

HTML 负责结构
CSS 负责样式
JS 负责行为（事件与动态更新）

🧱 二、HTML 结构：树状结构与 Emmet 语法

我们首先需要搭建时钟的 DOM 结构。一个典型的时钟包含：

一个外层容器 .clock
一个表盘 .clock-face
三个指针：时针、分针、秒针（.hand）

使用 Emmet 快速生成结构：

html

<div class="clock">
  <div class="clock-face">
    <div class="hand"></div>
    <div class="hand"></div>
    <div class="hand"></div>
  </div>
</div>

💡 Emmet 快捷写法：.clock > .clock-face > .hand*3

> 表示子元素
*3 表示重复 3 次
div 标签可省略

这种 树状结构 清晰表达了组件的嵌套关系，也便于后续 CSS 和 JS 的定位。

🎨 三、CSS 样式：让时钟“看起来像时钟”

CSS 负责将结构“装扮”成一个可视的时钟。我们需要：

设置表盘为圆形
指针为细长条
指针旋转的中心点对齐表盘中心

css

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

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%; /* 以底部为中心旋转 */
  background: #000;
}

.hour-hand {
  width: 6px;
  height: 60px;
}

.min-hand {
  width: 4px;
  height: 90px;
}

.second-hand {
  width: 2px;
  height: 110px;
  background: red;
}

✅ 小技巧：CSS 放在 <head> 中，可以和 HTML 同时解析，页面加载更快。

⚙️ 四、JavaScript 行为：让时钟“动起来”

JS 负责获取当前时间，并动态旋转指针。

javascript

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

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDeg = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDeg}deg)`;

  const minutes = now.getMinutes();
  const minutesDeg = ((minutes / 60) * 360) + 90;
  minHand.style.transform = `rotate(${minutesDeg}deg)`;

  const hours = now.getHours();
  const hoursDeg = ((hours / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hoursDeg}deg)`;
}

setInterval(setDate, 1000);

📌 注意：

我们给每个指针增加了 +90 度的初始偏移，因为指针默认是朝左的，需要转到 12 点方向。

使用 setInterval 每秒更新一次。

🧩 五、前端三权分立的优势

职责	技术	作用
结构	HTML	定义内容与层级，如盒子、指针、表盘
样式	CSS	控制布局、颜色、动画、形状
行为	JS	处理时间获取、指针旋转、动态交互

✅ 为什么要分离？

可维护性高：改样式不影响逻辑
加载性能好：CSS 提前加载，JS 最后执行不阻塞渲染
团队协作友好：结构、样式、逻辑可并行开发

🧠 六、性能小贴士

网页每快 0.1 秒，用户满意度和付费意愿都会显著提升。

✅ CSS 放在 <head> 中，避免页面闪动
✅ JS 放在 <body> 结束前，避免阻塞 DOM 渲染
❌ 不要把 JS 写在 <head> 中，否则会导致页面长时间白屏

✅ 总结

通过这个“JS 和 CSS 时钟”项目，我们不仅学会了一个有趣的小组件，更重要的是理解了：

HTML 是骨架
CSS 是血肉
JS 是灵魂

三权分立不是教条，而是高效、优雅、可维护前端工程的基石。