近翻出了吃灰好久的Kindle，已經好久不用了，電量完全耗盡。現在電子書都用掌閱，體驗比kindle要好上不少。想著Kindle也不能變成僵shi，要不廢物再利用？

網上把Kindle變時鐘的教程，大多只有一個樣式。于是搗鼓了一下，搜索和試用了好幾個時鐘，把幾個比較好用的和大家分享。

1.ilib時鐘

這個時鐘基本上都是網上各種推薦，然后就沒別的了。

不過，這確實是筆者用下來最實用的時鐘，優點是省電，字體大。

來看一下實際的效果，時間是大號數字，相當顯眼；有日期和星期，更為實用一些。整體上效果是真不錯，除了有瀏覽器的菜單欄之外。沒有秒鐘也好，更省電，打開飛行模式和背光，貌似百分之十幾可以用一天。

上面是網頁版的樣子，大家可以參考下。

重點來了，網址是 http://k.ilib.io/u/clock.html ，直接在瀏覽器里輸入就行。

2.Time is 帶秒表的世界時鐘

這個也是我比較喜歡的一個，有秒表，而且有世界主要時區，字體也很好看。

上面是網頁效果，很簡約，即使kindle不用，電腦用也很棒啊。可惜有廣告，否則就完美了。資源來了，點這里 https://time.is。

Kindle的效果，秒表直接跳動，這吃灰的玩意兒也終于有了點靈動。整個界面看，顏值還是看得過去的。像要哪個時區，就點擊哪個時區，擁有了世界時鐘功能。不過，省電是不要想了，一天一充少不了，或者直接插著電就好。

3.Time and Date 世界時鐘

這個時鐘這蠻不錯的。

先來資源位 https://www.timeanddate.com 。網頁上看相當不錯，五顏六色很炫麗，時間、日期、時區、地圖都很實用。甚至還有天氣。

放到Kindle之后，效果略有折扣，背景直接變黑了，成負顯效果了，也不錯哈哈。秒表也能直接跳動。如果覺得字體小了，也可以雙指放大。后面介紹到的其它時間也可以用這個方法來調整大小。

4.stopwatch 表盤時鐘

這個時鐘，也是少見的有表盤樣式。

不廢話先上 資源 https://www.online-stopwatch.com/clocks/ 。從網頁版來看，網頁做得真是簡單，甚至有些幼稚可愛，不過確實挺有趣，還可以隨機取名。

來看看Kindle端的效果。圓形表盤還有很有風格的，相對數字時鐘更有典雅的感覺。覺得小，也可以雙指放大。不過貌似秒表并不是實時跳動，算是個bug，但好歹表盤時鐘也算從無到有了。這個網站數字樣式的時鐘也有，不過效果一般。另外，這個時鐘貌似比較占內存，操作時延時明顯，一定要有耐心。

5.Java 時鐘

這個是比較簡約的時鐘，有數字，也有表盤，背景全黑。

看看網頁版本的效果，純黑背景，部分朋友還是會喜歡的。

資源位 是

https://www.nayuki.io/page/full-screen-clock-javascript

不過放在Kindle上就有點過于簡約了，雖然能用，得看各位的審美了。

6.Vclock 還有鬧鐘和秒表

最后這個略為強大，除了時鐘，還有秒表、鬧鐘還有倒計時功能。

先來看看在Kindle的效果，字體是深灰色，不是全黑，所以看點有點淡，不是很清楚。時間也是可以選的，各個時區都有。

網頁版似乎更好看實用一些，秒表、鬧鐘還有倒計時功能都流暢使用。

網址 vclock.com 。

最后，怎么設置？

其實，這么多時鐘都是運用Kindle的瀏覽器來完成的，實質上只是一個網頁而已。就Kindle有限的擴展性而言，也只能這樣操作了。

所以，方法其實很簡單，打開Kindle的瀏覽器，直接輸入上面的網址就行。

不過，為了更省電，建議打開飛行模式，不用wifi，同時把背光關掉，就是最省電的狀態了。如果時鐘計秒，屏幕也得加快刷新，所以也更耗電。

最重要一步，為了保持時鐘一直顯示，不要熄屏，需要進行魔法操作。在主頁上點擊放大鏡，進入搜索框，輸入“~ds”（一模一樣）就關閉了熄屏功能，時鐘就能一直顯示了。當然，廣告是可以直接關掉的，在設置里。

謝謝大家閱讀，希望大家的Kindle不要和我的一樣變成時鐘，書看起來！

碼字不易，謝謝點贊和關注。

一天，我需要一個數字時鐘組件，所以我很快編寫了一個簡單的 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) { ... }
})

模擬時鐘

作為獎勵 - 這是一個模擬時鐘，我不久前做了：

鋒網訊，距離下一場最愛歌手的演唱會還有多長時間？距離奧運會開幕還有多久？距離新年的到來還有多少天？如果你對即將發生的某個事件充滿期待的話，你一定會在心里想著它究竟還有多少天才會到來，正是因為這些期待，插件 CountdownLS 應運而生。

從名字或許你就能夠猜到，CountdownLS 會將一個倒計時時鐘放置在鎖屏界面中，并以天數、小時數、分鐘數以及秒數作為顯示，除了提供的功能之外，CountdownLS 也有著不錯的顏值，極簡化的設計也和蘋果的設計語言所吻合。

要安裝 CountdownLS 你需要前往這里（可能要掛 VPN）下載插件文件，然后需要用到鎖屏小工具插件例如 lockHTML，如果你使用的是 lockHTML，你甚至可以通過長按的方式來在屏幕中移動倒計時時鐘。要修改日期和時間，你需要對“js”文件夾下的 config.js 文件進行編輯。在文件中你也可以修改項目的名字，這樣就能取代原來默認的“WWDC”字樣。

當然，為設備選擇一張漂亮的壁紙的話，就能夠更好地和倒計時時鐘搭配起來。