效果圖

如圖所示，這是一個(gè)類(lèi)似算盤(pán)的時(shí)鐘效果，三個(gè)顏色從上往下分別代表時(shí)分秒，算盤(pán)左側(cè)的算珠即是對(duì)應(yīng)的當(dāng)前時(shí)間。

本次文章將解析如何用代碼實(shí)現(xiàn)這個(gè)時(shí)鐘效果，根據(jù)上面的動(dòng)圖分析出我們要實(shí)現(xiàn)的幾個(gè)主要功能點(diǎn)：

• 每個(gè)珠子代表一個(gè)數(shù)字，每行珠子的數(shù)量和位置反映了時(shí)間的一個(gè)特定部分（如小時(shí)、分鐘或秒）
• 算珠的動(dòng)畫(huà)從右往左，到十位整數(shù)時(shí)算珠所有恢復(fù)到右側(cè)
• 每過(guò)一秒刷新整個(gè)算盤(pán)時(shí)鐘

實(shí)現(xiàn)過(guò)程

HTML

在HTML中，我們有一個(gè)具有abaclock類(lèi)名的<div>元素，用作整個(gè)算盤(pán)時(shí)鐘的容器。在容器中包含了多個(gè)子元素，其中每個(gè)子元素代表一個(gè)數(shù)字位，通過(guò)data-beads屬性來(lái)指定該位的數(shù)字范圍。還可以通過(guò)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，用于設(shè)置最大珠子數(shù)和最小珠子間距。），grid布局，以及偽元素來(lái)創(chuàng)建算盤(pán)的視覺(jué)效果。

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

盤(pán)算的視覺(jué)效果是基于linear-gradient線性漸變實(shí)現(xiàn)，且都是基于偽元素實(shí)現(xiàn)，核心的漸變代碼定位為以下變量，以便于多個(gè)地方調(diào)用。

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

對(duì)于不同的顏色只需要增加 background-color 即可，例如算盤(pán)種的兩側(cè)框和傳過(guò)算珠的檔就是使用了不同的背景色。

算珠部分采用flex布局，默認(rèn)設(shè)置為 justify-content: flex-end; 將算珠放置在右側(cè)。

算珠移動(dòng)的過(guò)程時(shí)通過(guò)設(shè)置 transform: translateX 平移實(shí)現(xiàn)，

那些具有data-active="true"屬性的元素代表需要進(jìn)行平移操作，通過(guò)translateX()函數(shù)將元素沿X軸進(jìn)行平移。

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

計(jì)算邏輯如下：

• --max-beads表示該數(shù)字位上的最大珠子數(shù)。
• --beads表示當(dāng)前活動(dòng)的珠子數(shù)，默認(rèn)值為--max-beads，即全部珠子都處于活動(dòng)狀態(tài)。
• --min-beads-gap表示珠子間的最小間隔數(shù)，默認(rèn)值為1。

根據(jù)這些參數(shù)計(jì)算得出的結(jié)果是一個(gè)負(fù)百分比值，通過(guò)乘以-100%來(lái)實(shí)現(xiàn)向左平移的效果。

這段代碼的作用是根據(jù)當(dāng)前數(shù)字位上的活動(dòng)珠子個(gè)數(shù)，對(duì)珠子進(jìn)行相應(yīng)的平移，從而顯示出正確的時(shí)間數(shù)字。通過(guò)調(diào)整--beads和其他相關(guān)參數(shù)的值，可以控制每個(gè)數(shù)字位上顯示的珠子數(shù)量，并根據(jù)實(shí)際需要進(jìn)行調(diào)整。

最后是增加平移的過(guò)渡效果，增加 transition: transform 0.5s; 即可。

JavaScript

最后是JavaScript部分，定義了一個(gè)名為abaclock的函數(shù)，這個(gè)函數(shù)會(huì)創(chuàng)建并更新算盤(pán)時(shí)鐘的時(shí)間。

初始化: 通過(guò)查詢選擇器獲取所有珠子的行和展示的數(shù)字時(shí)間time元素。

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

創(chuàng)建珠子: 基于data-beads屬性的值，動(dòng)態(tài)創(chuàng)建每行的珠子。

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);
  }
})

時(shí)間更新: 使用toLocaleTimeString方法格式化當(dāng)前時(shí)間，以便獲取到的時(shí)間格式為 17:21:21 這樣的的格式。并更新每行珠子的狀態(tài)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]元素內(nèi)部的i都會(huì)實(shí)時(shí)更新屬性狀態(tài)active，從而和上面的CSS代碼中的[data-active=true]關(guān)聯(lián)觸發(fā)算珠的動(dòng)畫(huà)效果。

這段代碼的核心在于它如何將當(dāng)前時(shí)間轉(zhuǎn)換成算盤(pán)的形式來(lái)顯示。每個(gè)珠子代表一個(gè)數(shù)字，每行珠子的數(shù)量和位置反映了時(shí)間的一個(gè)特定部分（如小時(shí)、分鐘或秒）。JavaScript部分的time函數(shù)會(huì)在每一幀更新這些珠子，從而實(shí)時(shí)顯示當(dāng)前時(shí)間。

最后

本文解析了算盤(pán)時(shí)鐘的代碼實(shí)現(xiàn)過(guò)程，這個(gè)一個(gè)創(chuàng)新的時(shí)鐘顯示效果，將傳統(tǒng)的算盤(pán)設(shè)計(jì)與現(xiàn)代的前端技術(shù)結(jié)合起來(lái)。這個(gè)時(shí)鐘界面不僅有趣而且具有學(xué)習(xí)意義。這種方法展示了現(xiàn)代Web技術(shù)在創(chuàng)造性視覺(jué)效果方面的潛力，適合用于教育、娛樂(lè)或展示在網(wǎng)頁(yè)的一個(gè)獨(dú)特的小組件。有興趣的朋友可以嘗試看看~

到此這篇關(guān)于JS+CSS實(shí)現(xiàn)炫酷算盤(pán)時(shí)鐘效果的文章就介紹到這了,更多相關(guān)JS算盤(pán)時(shí)鐘內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論