看最终效果：

制作思路：

在timeline里每一行使用dl标签布局；每行(dl)左侧的边框使用border-left绘制。左侧圆形使用dt布局，我们可以使用border给dt加边框，使用border-radius绘制圆形效果，右侧文字使用dd排列。

html布局代码如下：

<div class="timeline">

<dl>

<dt class="on"></dt>

<dd>

<h3>管家接单中</h3>

<p>2021-04-21 14:47:56.0</p>

</dd>

</dl>

<dl>

<dt></dt>

<dd>

<h3>已派单</h3>

<p></p>

</dd>

</dl>

<dl>

<dt></dt>

<dd>

<h3>已完成</h3>

<p></p>

</dd>

</dl>

</div>

css样式代码：

.timeline{ padding: 1rem 0;}

.timeline dl{border-left:1px solid #eee; position:relative; margin:0 0 0 .5rem; height: 5rem;}

.timeline dl dt{ position: absolute; left: -.5rem; top:0rem; width:.5rem; height: .5rem; border-radius: .5rem; border:2px solid #eee; background-color: #fff;}

.timeline dl dt.on{border:2px solid #FF8800;}

.timeline dl dd{ position: absolute; left: 1rem; top:0rem;}

.timeline dl dd h3{font-size:1.1rem; font-weight:600; padding:0 0 .5rem 0; color: #333333;}

.timeline dl dd p{ color: #949494;}

.timeline dl:last-child{border-left:none; }

说明：定义dl样式的时候position一定要使用relative。因为后面我们需要给里面的dt和dd使用绝对定位。

dt标签里，position：absolute代表使用绝对定位。left位置为-.5rem代表向左负的0.5rem（这里我使用的rem单位 ，你们使用px的话，就写具体的px 值）。宽和高也同时是.5rem。然后为了绘制圆形设置border-radius也是.5rem。边框使用border属性设置宽度为2px。

dd标签里，同样设置position:absolute使用绝对定位。设置left为1rem（代表距离左边界1rem）。

然后我们看到最后一个dl左边是没有边框的，如下图箭头所示：

这个是通过：.timeline dl:last-child{border-left:none; }设定的。

如果没有这行，效果就是这边的样子了：

好了，介绍就这些，代码不多，实现了效果：）

一天，我需要一个数字时钟组件，所以我很快编写了一个简单的 JavaScript 方法：

function uiDigitalClock(node) {
  const now = () => {
    node.textContent = new Date().toLocaleTimeString()
    requestAnimationFrame(now)
  }
  now()
}

我在某处读到，这requestAnimationFrame应该比 更好的性能setInterval，但该方法一直困扰着我。

在最佳条件下，每秒requestAnimationFrame触发60 次——这比数字时钟需要的多 60 倍！

Date()每秒创建 60 次对象对性能来说并不好！

所以我尝试了setInterval：

function interval(node){
  return setInterval(() => node.textContent = new Date().toLocaleTimeString(), 1000)
}

同样，代码不多，视觉结果是相同的 - 并且每秒只有一个对象。 Date()

又怎样呢setTimeout()？

function timeout(node) {
  const now = () => {
    node.textContent = new Date().toLocaleTimeString()
    setTimeout(now, 1000)
  }
  now()
}

它也能得到类似的结果，但有令人讨厌的延迟（setImmediate()仅在 Node 中）

然后我决定修改初始版本，只每秒触发一次，并requestAnimationFrame()返回时间戳：

function frame(node) {
  let last = 0;
  const render = now => {
    if (!last || now - last >= 1000) {
      last = now;
      node.textContent = new Date().toLocaleTimeString();
    }
    requestAnimationFrame(render);
  }
  window.requestAnimationFrame(render);
}

当所有 3 个方法都运行时，我碰巧检查了开发工具中的标记，并注意到我什至无法扩展节点，因为它们不断刷新，并且看起来像旧的<blink>-tag！

向巴德寻求帮助

仍然不知道该选择哪种方法，我决定询问 Google Bard，它回答说：

• Clock1使用该setInterval()方法创建一个每 1000 毫秒（1 秒）触发一次的循环计时器。这是性能最低的方法，因为它为每次迭代创建一个新的计时器，这可能会增加大量的开销。
• Clock2使用该setTimeout()方法，创建一个在 1000 毫秒后触发的计时器。这比clock1 性能更高，因为它不会为每次迭代创建新的计时器。然而，它的性能仍然不如clock3，因为浏览器必须等待计时器触发才能更新文本内容。
• Clock3使用该requestAnimationFrame()方法，这是请求浏览器重绘的更有效方法。浏览器只会在必要时重新绘制元素，这可以节省大量的 CPU 时间。

好吧，我决定使用clock3 ...但后来我突然想到：“ CSS 中的数字动画怎么样？使用@property？

Jhey不久前制作了一个纯 CSS 秒表，所以我决定尝试类似的东西。

@property --seconds {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --minutes {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --hours {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

然后，在<ol>-tag 中，我<li>为每个时间单位添加了一个 -tag。

要使用 - 声明的值@property，您需要使用 CSS 计数器，因此几秒钟内它是：

.seconds {
  animation: seconds 60s steps(60, end) infinite;
  animation-delay: var(--delay-seconds, 0s);
  counter-reset: seconds var(--seconds);
  &::after { content: counter(seconds, decimal-leading-zero) ' '; }
}

要为秒设置动画，需要一个关键帧：

@keyframes seconds { 
  from { --seconds: 0;}
  to { --seconds: 60; }
}

对于几分钟来说，几乎是一样的，但是动画花费了 60 倍的时间 (60 x 60 = 3600)：

animation: minutes 3600s steps(60, end) infinite;

对于几个小时，我们需要将该数字乘以 24：

animation: hours 86400s steps(24, end) infinite;

耶！我们有一个可以工作的 CSS 时钟……但它只在午夜工作，因为小时、分钟和秒都从0（零）开始。

那么该怎么办？创建初始对象后，我可以轻松地从 JavaScript 更新属性Date()。

但这样动画就会出错，因为它们会运行相同的时间（每秒钟 60 秒），即使实际的秒数小于该值。

我在 Twitter 上寻求帮助——幸运的是，Temani Afif 和 Álvaro Montoro 回复了！解决方案是使用负数 animation-delay。

因此，使用一些 JavaScript 来设置当前时间并计算延迟：

const time = new Date();
const hours = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();

// Delays
const HOURS = -Math.abs((hours * 3600) + (minutes * 60) + seconds);
const MINS = -Math.abs((minutes * 60) + seconds);
const SECS = -Math.abs(seconds);

...我们可以更新之前指定的 CSS 属性，例如：

node.style.setProperty(`--delay-seconds`, `${seconds}s`);

现在，我们有了一个可以工作的数字 CSS 时钟——将其与此处的其他方法进行比较：

如果您在开发工具中检查标记，您会发现 CSS 版本并未重写 DOM 内容。

倒数

之后，我决定重新审视我的旧 Codepen，多语言倒计时，并制作一个纯 CSS 版本：

locale如果您想要其他语言，您可以在 JS 代码中使用：

但性能呢？CSS 可能不会像 JavaScript 那样阻塞主线程，但我们能确定它使用 GPU 而不是 CPU 吗？

有一个老技巧：

.useGpu {
  transform: translateZ(0);
  will-change: transform;
}

然后，在开发工具中，转到“图层”：

看到“倒计时”现在如何拥有自己的渲染层了吗？不确定这是否仍然适用，但我猜添加也没什么坏处。

离开浏览器选项卡

当我离开浏览器选项卡并返回时，纯 CSS 时钟没有出现任何问题。也许是我等的时间还不够长吧！但如果您遇到任何问题，请使用此事件重新计算时钟的延迟：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) { ... }
})

模拟时钟

作为奖励 - 这是一个模拟时钟，我不久前做了：

言

先贴上另一位开发者的原文地址，其实里面显示的是2种风格的时钟，一种为传统的挂钟，一种为数字时钟，我就分开来显示了。这里再另外改了个不同背景色的方形时钟，对于数字时钟也进行了改进。

在最后会放出源码，给喜欢研究的小伙伴一个参考。当然咯，最好还是自己能实践一下。

此教程版本是基于原文地址基础上进行小的修改而来，使用的是LESS的Mixin代码方式，使得后期调整大小及颜色会更加方便，只需要调整不同参数即可。

如果你对LESS以及mixin不太了解，建议先学习基础知识。less编译css的软件，推荐使用koala。

第一步，创建文件

结构如上图所示，CSS里创建style.less就可以了（编译引用会生成css文件），另外创建resource文件夹，里面可以再创建mixin_clock.less（不需要编译），文件起名可以根据自己的项目需求。clock.html中正常引用style.css文件就可以了。

把css目录拖到koala软件中，并且开启style.less右边的source map，这样在浏览器上，f12可以看到对应的代码位置，方便调整。

style.less里的引用代码，编译后就可以自动生成同名.css文件了：

//公共文件夹根目录
@resource_path: '../resource';
// 组件扩展
@import '@{resource_path}/mixin_clock';

等以后resource里组件多的话，也可以单独留一个引用的文件。接下来就可以正式开工了。

第二步，按原教程录入内容

原来的css样式的部分，全都放在mixin_clock.less文件中，因为是引用并且一直在编译的，所以都能正常显示。

这里要提几点顺便的调整

1、border-radius，如果是正圆的，则改为50%，而不是具体的数值。

2、background: linear-gradient(top, #f9f9f9, #666)，里面的top，改为180deg，因为在部分chrome中可能会报错，而具体的角度不会

3、有些div用了position: absolute，就顺便加上z-index值，具体数字，根据层叠的前后进行设置

4、将最后的数字时钟和挂钟拆分（如果你想和在一起的话，建议改为年月日可能更实用）

第三步，调整为LESS的结构写法

使用less有个好处就是不需要反复写父级名称，部分的修改基础结构如下：

// 表盘
    .frame_face {
      ...
      &:before {
        ...
     ｝
      &:before {
        ...
     ｝
   ｝

tips: 因为要集成到别的框架中，自己定义的名称，建议统一改用下划线，以作区分。

这里的&，相当于.frame_face:before{}

第四步，提取公共部分，改为变量，并改成Mixin形式调用

这一步比较重要，这也是LESS比写标准CSS最显著的优势，当然现在CSS也可以写变量，但是远没有LESS写的方便。

将里面一些需要以后调整的都提取出来作为变量，我也大致罗列下调整的地方：

1、比如钟的大小，如果调整的话，里面的大小也都需要跟着调整，所以上面提到最好是按百分比作为相对的数值，那么调整一个地方，相对的部分也能跟着进行调整。

2、涉及到的颜色，比如背景色，文字颜色等。当然咯这里涉及的地方比较多，并非所有的都需要提取出来，根据自己的需求即可。

3、倒角数值也可以取出来，比如最终需要一个方形的时钟，那就改成数值就可以了。

4、改为Mixin版，以方便参数调用，为了便于区分，可以前缀加上mixin，格式参考：

.mixin_basic_clock(变量名1: 参数; 变量名2: 参数){
  代码部分1: 变量名1;
  代码部分2: 变量名2;
}

第5步，JS更改为jQuery形式，并且改进

其实这个改动不难，并且对数字时钟增加了年月日周。

原来的每个公共的判断方法提取出来，因为一般都是显示2位数，原来的小于2位，就自动在前面加个“0”，改进如下

function checkTime (i) {
 if (i < 10) {
i = "0" + i;
 }
return i;
 }
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);

最终代码

clock.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>时钟</title>
  <link href="../css/style.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="../js/clock.js"></script>
</head>
<body>
  <div class="circle_clock">
    <!-- 圆形挂钟表盘 -->
    <div class="frame_face">
      <!-- 刻度 -->
      <ul class="minute_marks"></ul>
      <!-- 刻度数字 -->
      <ul class="digits">
        <li>3</li>
        <li>5</li>
        <li>9</li>
        <li>12</li>
      </ul>
      <!-- 指针 -->
      <div class="hours_hand"></div>
      <div class="minutes_hand"></div>
      <div class="seconds_hand"></div>
      <!-- 指针中心点 -->
      <div class="clock_center"></div>
    </div>
  </div>
  <div class="squire_clock">
    <!-- 方形挂钟表盘 -->
    <div class="frame_face">
      <!-- 刻度 -->
      <ul class="minute_marks"></ul>
      <!-- 刻度数字 -->
      <ul class="digits">
        <li>3</li>
        <li>6</li>
        <li>9</li>
        <li>12</li>
      </ul>
      <!-- 指针 -->
      <div class="hours_hand"></div>
      <div class="minutes_hand"></div>
      <div class="seconds_hand"></div>
      <!-- 指针中心点 -->
      <div class="clock_center"></div>
    </div>
  </div>
  <br>
  <br>
  <!-- 数字时钟 -->
  <div class="digital_clock">
    <div class="digit_ymd num"></div>
    <div class="digit_hms num"></div>
  </div>
</body>
</html>

mixin_clock.less

//传统挂钟
//@clock_wh: 钟的宽度/高度
//@clock_border: 钟的边框，50%为圆形，也可以设置成具体数值
//@frame_bgc1: 表盘背景渐变色1
//@frame_bgc2: 表盘背景渐变色2
//@mm_bgc: 刻度背景色
//@digits_c: 表盘数字文字颜色
//@hh_bgc: 时针背景颜色
//@mh_bgc：分针背景颜色
//@sh_bgc：秒针背景颜色
.mixin_basic_clock(@clock_wh: 30em; @clock_border: 50%; @frame_bgc1:#fff; @frame_bgc2:#ccc; @mm_bgc: #666; @digits_c: #555; @hh_bgc:#232425; @mh_bgc: #343536; @sh_bgc: #c00) {
    //@digits: 表盘文字中心距离
    //@digits_s: 表盘文字大小
    //@clock_center: 表盘中心大小
    @digits: @clock_wh / 4.2;
    @digits_s: @clock_wh / 20;
    @clock_center: @clock_wh / 8;
    // 表盘
    .frame_face {
        position: relative;
        width: @clock_wh;
        height: @clock_wh;
        border-radius: @clock_border;
        background: linear-gradient(180deg, #f9f9f9, #666);
        box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
        &:before {
            content: '';
            width: @clock_wh * 0.98;
            height: @clock_wh * 0.98;
            border-radius: @clock_border;
            position: absolute;
            top: @clock_wh * 0.01;
            left: @clock_wh * 0.01;
            background: radial-gradient(
                ellipse at center,
                rgba(246, 248, 249, 1) 0%,
                rgba(229, 235, 238, 1) 65%,
                rgba(205, 212, 217, 1) 66%,
                rgba(245, 247, 249, 1) 100%
            );
        }
        &:after {
            content: '';
            width: @clock_wh * 0.94;
            height: @clock_wh * 0.94;
            border-radius: @clock_border;
            position: absolute;
            top: @clock_wh * 0.03;
            left: @clock_wh * 0.03;
            box-shadow: inset rgba(0, 0, 0, 0.2) 0.2em 0.2em 1em;
            // border: (@clock_wh * 0.001) solid rgba(0, 0, 0, 0.2);
            background: linear-gradient(180deg, @frame_bgc1, @frame_bgc2);
        }
    }
    // 刻度
    .minute_marks li {
        display: block;
        width: 0.2em;
        height: 0.6em;
        background: @mm_bgc;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -0.4em 0 0 -0.1em;
        z-index: 8;
    }
    // 刻度数字
    .digits {
        width: @clock_wh;
        height: @clock_wh;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@clock_wh / 2;
        margin-left: -@clock_wh / 2;
        padding: 0;
        z-index: 9;
        li {
            font-size: @digits_s;
            display: block;
            width: @digits_s;
            height: @digits_s;
            position: absolute;
            top: 50%;
            left: 50%;
            line-height: @digits_s;
            text-align: center;
            margin: (-@digits_s / 2) 0 0 (-@digits_s / 2);
            font-weight: bold;
            color: darken(@digits_c, 10%);
            &:nth-child(1) {
                transform: translate(@digits, 0);
            }
            &:nth-child(2) {
                transform: translate(0, @digits);
            }
            &:nth-child(3) {
                transform: translate(-@digits, 0);
            }
            &:nth-child(4) {
                transform: translate(0, -@digits);
            }
        }
    }
    // 时针
    .hours_hand {
        width: 0.8em;
        height: 7em;
        border-radius: 0 0 0.9em 0.9em;
        background: @hh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -0.8em -0.4em;
        box-shadow: @hh_bgc 0 0 2px;
        transform-origin: 0.4em 6.2em;
        transform: rotate(-25deg);
        z-index: 21;
        &:before {
            content: '';
            background: inherit;
            width: 1.8em;
            height: 0.8em;
            border-radius: 0 0 0.8em 0.8em;
            box-shadow: @hh_bgc 0 0 1px;
            position: absolute;
            top: -0.7em;
            left: -0.5em;
        }
        &:after {
            content: '';
            width: 0;
            height: 0;
            border: 0.9em solid @hh_bgc;
            border-width: 0 0.9em 2.4em 0.9em;
            border-left-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: -3.1em;
            left: -0.5em;
        }
    }
    // 分针
    .minutes_hand {
        width: 0.6em;
        height: 12.5em;
        border-radius: 0.5em;
        background: @mh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -1.5em -0.3em;
        box-shadow: @mh_bgc 0 0 2px;
        transform-origin: 0.3em 11em;
        z-index: 22;
    }
    // 秒针
    .seconds_hand {
        width: 0.2em;
        height: 14em;
        border-radius: ~'0.1em 0.1em 0 0 / 10em 10em 0 0';
        background: @sh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -2em -0.1em;
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em;
        transform-origin: 0.1em 12em;
        z-index: 23;
        &:before {
            content: '';
            width: 0.6em;
            height: 3em;
            border-radius: ~'0.2em 0.2em 0.4em 0.4em / 0.2em 0.2em 2em 2em';
            box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em;
            background: inherit;
            position: absolute;
            left: 50%;
            bottom: -3em;
            margin-left: -0.3em;
        }
        &:after {
            content: '';
            width: 1em;
            height: 1em;
            border-radius: 50%;
            background: inherit;
            position: absolute;
            left: 50%;
            bottom: 1.5em;
            margin-left: -0.5em;
        }
    }
    //中心点
    .clock_center {
        &:before {
            content: '';
            width: 1.6em;
            height: 1.6em;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -0.8em 0 0 -0.8em;
            background: #121314;
            z-index: 10;
        }
        &:after {
            content: '';
            width: @clock_center;
            height: @clock_center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: (-@clock_center / 2) 0 0 (-@clock_center / 2);
            border: 0.1em solid #c6c6c6;
            background: radial-gradient(
                ellipse at center,
                rgba(200, 200, 200, 0),
                rgba(190, 190, 190, 1) 90%,
                rgba(130, 130, 130, 1) 100%
            );
            z-index: 11;
        }
    }
}

// 数字时钟
//@clock_w: 时钟宽度
//@clock_fs1: 文字大小1
//@clock_fs2: 文字大小2
//@clock_bgc1: 时钟背景色1
//@clock_bgc2: 时钟背景色2
//@clock_fc: 时钟文字颜色
.mixin_digital_clock(@clock_w: 30em; @clock_fs1: 2em; @clock_fs2: 5em; @clock_bgc1:#0a2e38; @clock_bgc2:#000; @clock_fc: #daf6ff) {
    width: @clock_w;
    border-radius: 0.6em;
    padding: 1em;
    overflow: hidden;
    background: @clock_bgc1;
    background: radial-gradient(ellipse at center, @clock_bgc1 0%, @clock_bgc2 70%);
    .num {
        padding: 0.1em;
        color: @clock_fc;
        text-align: center;
        word-break: keep-all;
        letter-spacing: 0.05em;
        font-family: 'Share Tech Mono', Consolas, monaco, monospace;
        text-shadow: ~'0 0 20px #0aafe6, 0 0 20px rgb(10 175 230 / 0%)';
    }
    .digit_ymd {
        font-size: @clock_fs1;
    }
    .digit_hms {
        font-size: @clock_fs2;
    }
}

style.less

//公共文件夹根目录
@resource_path: '../resource';
// 组件扩展
@import '@{resource_path}/mixin_clock';

//圆形挂钟
.circle_clock {
    .mixin_basic_clock();
    display: inline-block;
    margin: 2em;
}

//方形挂钟
.squire_clock {
    .mixin_basic_clock(@clock_border: 2em; @frame_bgc1:#90bef3; @frame_bgc2:#616fad; @mm_bgc: #333;);
    display: inline-block;
    margin: 2em;
}

//数字时钟
.digital_clock {
    .mixin_digital_clock();
    margin: 2em;
}

clock.js

window.onload = function () {
  // 生成刻度
  var markWrap = $('.minute_marks');
  for (index = 0; index < 60; index++) {
    var markItem = $('<li></li>');
    markItem.css("transform", "rotate(" + index * 6 + "deg) translateY(-12.7em)");
    if (index % 5 == 0) {
      markItem.css({ "width": "0.3em", "height": "1em" });
    }
    markWrap.append(markItem);
  }

  setInterval(function () {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var week = "星期" + "日一二三四五六".split(/(?!\b)/)[today.getDay()];
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();
    var hournum;
    // 指针转动
    if (hour > 12) {
      hournum = ((hour - 12) + minute / 60) * 30;
    } else {
      hournum = (hour + minute / 60) * 30;
    }
    var minnum = (minute + second / 60) * 6 + second / 60;
    var sennum = second * 6;
    $('.hours_hand').css('transform', 'rotate(' + hournum + 'deg)');
    $('.minutes_hand').css('transform', 'rotate(' + minnum + 'deg)');
    $('.seconds_hand').css('transform', 'rotate(' + sennum + 'deg)');

    // 数字时钟
    function checkTime (i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
    month = checkTime(month);
    date = checkTime(date);
    hour = checkTime(hour);
    minute = checkTime(minute);
    second = checkTime(second);
    $('.digit_ymd').text(year + '/' + month + '/' + date + ' ' + week);
    $('.digit_hms').text(hour + ':' + minute + ':' + second);
  }, 1000);
}

时钟的样式还可以有更丰富的方法，比如给挂钟加个背景，8字形的数字时钟等等，可以在原有引用mixin之后再自己加样式覆盖，更多创意等待你的发现