效果圖

如圖所示，這是一個類似算盤的時鐘效果，三個顏色從上往下分別代表時分秒，算盤左側(cè)的算珠即是對應(yīng)的當前時間。

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

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

實現(xiàn)過程

HTML

在HTML中，我們有一個具有abaclock類名的<div>元素，用作整個算盤時鐘的容器。在容器中包含了多個子元素，其中每個子元素代表一個數(shù)字位，通過data-beads屬性來指定該位的數(shù)字范圍。還可以通過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布局，以及偽元素來創(chuàng)建算盤的視覺效果。

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

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

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

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

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

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

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

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

計算邏輯如下：

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

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

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

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

JavaScript

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

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

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

創(chuàng)建珠子: 基于data-beads屬性的值，動態(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);
  }
})

時間更新: 使用toLocaleTimeString方法格式化當前時間，以便獲取到的時間格式為 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都會實時更新屬性狀態(tài)active，從而和上面的CSS代碼中的[data-active=true]關(guān)聯(lián)觸發(fā)算珠的動畫效果。

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

最后

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

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

最新評論