近翻出了吃灰好久的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”字样。

当然，为设备选择一张漂亮的壁纸的话，就能够更好地和倒计时时钟搭配起来。