CSS+JS完成炫酷算盘时钟

如图所示，这是一个类似算盘的时钟作用，三个颜色从上往下别离代表时分秒，算盘左边的算珠即是对应的当时时刻。

本次文章将解析如何用代码完成这个时钟作用，依据上面的动图分分出我们要完成的几个主要功能点：

  • 每个珠子代表一个数字，每行珠子的数量和方位反映了时刻的一个特定部分（如小时、分钟或秒）
  • 算珠的动画从右往左，到十位整数时算珠一切康复到右侧
  • 每过一秒刷新整个算盘时钟

完成进程

HTML

在HTML中，我们有一个具有abaclock类名的<div>元素，用作整个算盘时钟的容器。在容器中包含了多个子元素，其间每个子元素代表一个数字位，经过data-beads特点来指定该位的数字范围。还能够经过style特点自界说子元素的颜色。

<div class="abaclock">
  <div data-beads=2 style="--color: red"></div>
  <div data-beads=10 style="--color: red"></div>
  <div data-beads=6 style="--color: green"></div>
  <div data-beads=10 style="--color: green"></div>
</div>

CSS

接着是CSS部分，界说了.abaclock的样式。CSS运用了自界说特点（如--max-beads和--min-beads-gap，用于设置最大珠子数和最小珠子距离。），grid布局，以及伪元素来创立算盘的视觉作用。

  --max-beads: 10;
  --min-beads-gap: 4;

盘算的视觉作用是依据linear-gradient线性突变完成，且都是依据伪元素完成，中心的突变代码定位为以下变量，以便于多个当地调用。

--grad: hsl(0 0% 100% / .25), hsl(0 0% 100% / .5) 25%, hsl(0 0% 0% / .5) 90%;

关于不同的颜色只需求增加 background-color 即可，例如算盘种的两边框和传过算珠的档便是运用了不同的背景色。

CSS+JS完成炫酷算盘时钟

算珠部分选用flex布局，默认设置为 justify-content: flex-end; 将算珠放置在右侧。

CSS+JS完成炫酷算盘时钟

算珠移动的进程时经过设置 transform: translateX 平移完成，

CSS+JS完成炫酷算盘时钟

那些具有data-active="true"特点的元素代表需求进行平移操作，经过translateX()函数将元素沿X轴进行平移。

[data-active=true] {
  transform: translateX(calc(-100% * (var(--max-beads) - var(--beads, var(--max-beads)) + var(--min-beads-gap,1))));
}

计算逻辑如下：

  • --max-beads表明该数字位上的最大珠子数。
  • --beads表明当时活动的珠子数，默认值为--max-beads，即悉数珠子都处于活动状况。
  • --min-beads-gap表明珠子间的最小距离数，默认值为1。

依据这些参数计算得出的结果是一个负百分比值，经过乘以-100%来完成向左平移的作用。

这段代码的作用是依据当时数字位上的活动珠子个数，对珠子进行相应的平移，然后显现出正确的时刻数字。经过调整--beads和其他相关参数的值，能够控制每个数字位上显现的珠子数量，并依据实际需求进行调整。

最终是增加平移的过渡作用，增加 transition: transform 0.5s; 即可。

JavaScript

最终是JavaScript部分，界说了一个名为abaclock的函数，这个函数会创立并更新算盘时钟的时刻。

初始化: 经过查询选择器获取一切珠子的行和展示的数字时刻time元素。

const abaclockRows = document.querySelectorAll(selector + '>[data-beads]');
const timeEl = document.querySelector(selector + '>time');
if(!abaclockRows) return

创立珠子: 依据data-beads特点的值，动态创立每行的珠子。

const digitEls = [];
abaclockRows.forEach(digitEl => {
  const beads = Number(digitEl.dataset.beads);
  digitEl.style.setProperty("--beads", beads);
  const beadEls = [];
  digitEls.push(beadEls)
  for(let i = 0; i < beads; i++) {
    const beadEl = document.createElement("i")
    digitEl.append(beadEl);
    beadEls.push(beadEl);
  }
})

时刻更新: 运用toLocaleTimeString方法格局化当时时刻，以便获取到的时刻格局为 17:21:21 这样的的格局。并更新每行珠子的状况active和time元素的显现。

function time(){
  const options = { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit"};
  const str = new Date().toLocaleTimeString([], options);
  str.match(/d/g).forEach((d, di) => digitEls[di].forEach((b, bi) => b.dataset.active = bi < d));
  timeEl.dateTime = timeEl.innerHTML = str;
  window.requestAnimationFrame(time);
}
time();

依据以上的代码每一秒[data-beads]元素内部的i都会实时更新特点状况active，然后和上面的CSS代码中的[data-active=true]相关触发算珠的动画作用。

CSS+JS完成炫酷算盘时钟

这段代码的中心在于它如何将当时时刻转换成算盘的形式来显现。每个珠子代表一个数字，每行珠子的数量和方位反映了时刻的一个特定部分（如小时、分钟或秒）。JavaScript部分的time函数会在每一帧更新这些珠子，然后实时显现当时时刻。

在线预览

码上地址： CSS+JS实现炫酷算盘时钟

最终

本文解析了算盘时钟的代码完成进程，这个一个立异的时钟显现作用，将传统的算盘规划与现代的前端技能结合起来。这个时钟界面不仅风趣而且具有学习意义。这种方法展示了现代Web技能在创造性视觉作用方面的潜力，合适用于教育、文娱或展示在网页的一个独特的小组件。有爱好的朋友能够尝试看看~

参阅

https://codepen.io/MarkBoots/pen/WNPgRLN

看完本文假如觉得有用，记得点个赞支撑，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技能干货，大众号：南城大前端（ID: nanchengfe）