整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
近翻出了吃灰好久的Kindle，已經(jīng)好久不用了，電量完全耗盡。現(xiàn)在電子書都用掌閱，體驗比kindle要好上不少。想著Kindle也不能變成僵shi，要不廢物再利用？
網(wǎng)上把Kindle變時鐘的教程，大多只有一個樣式。于是搗鼓了一下，搜索和試用了好幾個時鐘，把幾個比較好用的和大家分享。
這個時鐘基本上都是網(wǎng)上各種推薦，然后就沒別的了。
不過，這確實是筆者用下來最實用的時鐘，優(yōu)點是省電，字體大。
來看一下實際的效果，時間是大號數(shù)字，相當顯眼；有日期和星期，更為實用一些。整體上效果是真不錯，除了有瀏覽器的菜單欄之外。沒有秒鐘也好，更省電，打開飛行模式和背光，貌似百分之十幾可以用一天。
上面是網(wǎng)頁版的樣子，大家可以參考下。
重點來了，網(wǎng)址是 http://k.ilib.io/u/clock.html ，直接在瀏覽器里輸入就行。
這個也是我比較喜歡的一個，有秒表，而且有世界主要時區(qū)，字體也很好看。
上面是網(wǎng)頁效果，很簡約，即使kindle不用，電腦用也很棒啊。可惜有廣告，否則就完美了。資源來了，點這里 https://time.is。
Kindle的效果，秒表直接跳動，這吃灰的玩意兒也終于有了點靈動。整個界面看，顏值還是看得過去的。像要哪個時區(qū)，就點擊哪個時區(qū)，擁有了世界時鐘功能。不過，省電是不要想了，一天一充少不了，或者直接插著電就好。
這個時鐘這蠻不錯的。
先來資源位 https://www.timeanddate.com 。網(wǎng)頁上看相當不錯，五顏六色很炫麗，時間、日期、時區(qū)、地圖都很實用。甚至還有天氣。
放到Kindle之后，效果略有折扣，背景直接變黑了，成負顯效果了，也不錯哈哈。秒表也能直接跳動。如果覺得字體小了，也可以雙指放大。后面介紹到的其它時間也可以用這個方法來調(diào)整大小。
這個時鐘，也是少見的有表盤樣式。
不廢話先上 資源 https://www.online-stopwatch.com/clocks/ 。從網(wǎng)頁版來看，網(wǎng)頁做得真是簡單，甚至有些幼稚可愛，不過確實挺有趣，還可以隨機取名。
來看看Kindle端的效果。圓形表盤還有很有風格的，相對數(shù)字時鐘更有典雅的感覺。覺得小，也可以雙指放大。不過貌似秒表并不是實時跳動，算是個bug，但好歹表盤時鐘也算從無到有了。這個網(wǎng)站數(shù)字樣式的時鐘也有，不過效果一般。另外，這個時鐘貌似比較占內(nèi)存，操作時延時明顯，一定要有耐心。
這個是比較簡約的時鐘，有數(shù)字，也有表盤，背景全黑。
看看網(wǎng)頁版本的效果，純黑背景，部分朋友還是會喜歡的。
資源位 是
https://www.nayuki.io/page/full-screen-clock-javascript
不過放在Kindle上就有點過于簡約了，雖然能用，得看各位的審美了。
最后這個略為強大，除了時鐘，還有秒表、鬧鐘還有倒計時功能。
先來看看在Kindle的效果，字體是深灰色，不是全黑，所以看點有點淡，不是很清楚。時間也是可以選的，各個時區(qū)都有。
網(wǎng)頁版似乎更好看實用一些，秒表、鬧鐘還有倒計時功能都流暢使用。
網(wǎng)址 vclock.com 。
其實，這么多時鐘都是運用Kindle的瀏覽器來完成的，實質(zhì)上只是一個網(wǎng)頁而已。就Kindle有限的擴展性而言，也只能這樣操作了。
所以，方法其實很簡單，打開Kindle的瀏覽器，直接輸入上面的網(wǎng)址就行。
不過，為了更省電，建議打開飛行模式，不用wifi，同時把背光關(guān)掉，就是最省電的狀態(tài)了。如果時鐘計秒，屏幕也得加快刷新，所以也更耗電。
最重要一步，為了保持時鐘一直顯示，不要熄屏，需要進行魔法操作。在主頁上點擊放大鏡，進入搜索框，輸入“~ds”（一模一樣）就關(guān)閉了熄屏功能，時鐘就能一直顯示了。當然，廣告是可以直接關(guān)掉的，在設置里。
謝謝大家閱讀，希望大家的Kindle不要和我的一樣變成時鐘，書看起來！
碼字不易，謝謝點贊和關(guān)注。
一天，我需要一個數(shù)字時鐘組件，所以我很快編寫了一個簡單的 JavaScript 方法：
function uiDigitalClock(node) {
const now=()=> {
node.textContent=new Date().toLocaleTimeString()
requestAnimationFrame(now)
}
now()
}
我在某處讀到，這requestAnimationFrame應該比 更好的性能setInterval，但該方法一直困擾著我。
在最佳條件下，每秒requestAnimationFrame觸發(fā)60 次——這比數(shù)字時鐘需要的多 60 倍！
Date()每秒創(chuàng)建 60 次對象對性能來說并不好！
所以我嘗試了setInterval：
function interval(node){
return setInterval(()=> node.textContent=new Date().toLocaleTimeString(), 1000)
}
同樣，代碼不多，視覺結(jié)果是相同的 - 并且每秒只有一個對象。 Date()
又怎樣呢setTimeout()？
function timeout(node) {
const now=()=> {
node.textContent=new Date().toLocaleTimeString()
setTimeout(now, 1000)
}
now()
}
它也能得到類似的結(jié)果，但有令人討厭的延遲（setImmediate()僅在 Node 中）
然后我決定修改初始版本，只每秒觸發(fā)一次，并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 個方法都運行時，我碰巧檢查了開發(fā)工具中的標記，并注意到我什至無法擴展節(jié)點，因為它們不斷刷新，并且看起來像舊的<blink>-tag！
仍然不知道該選擇哪種方法，我決定詢問 Google Bard，它回答說：
好吧，我決定使用clock3 ...但后來我突然想到：“ CSS 中的數(shù)字動畫怎么樣？使用@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 計數(shù)器，因此幾秒鐘內(nèi)它是：
.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) ' '; }
}
要為秒設置動畫，需要一個關(guān)鍵幀：
@keyframes seconds {
from { --seconds: 0;}
to { --seconds: 60; }
}
對于幾分鐘來說，幾乎是一樣的，但是動畫花費了 60 倍的時間 (60 x 60=3600)：
animation: minutes 3600s steps(60, end) infinite;
對于幾個小時，我們需要將該數(shù)字乘以 24：
animation: hours 86400s steps(24, end) infinite;
耶！我們有一個可以工作的 CSS 時鐘……但它只在午夜工作，因為小時、分鐘和秒都從0（零）開始。
那么該怎么辦？創(chuàng)建初始對象后，我可以輕松地從 JavaScript 更新屬性Date()。
但這樣動畫就會出錯，因為它們會運行相同的時間（每秒鐘 60 秒），即使實際的秒數(shù)小于該值。
我在 Twitter 上尋求幫助——幸運的是，Temani Afif 和 álvaro Montoro 回復了！解決方案是使用負數(shù) 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`);
現(xiàn)在，我們有了一個可以工作的數(shù)字 CSS 時鐘——將其與此處的其他方法進行比較：
如果您在開發(fā)工具中檢查標記，您會發(fā)現(xiàn) CSS 版本并未重寫 DOM 內(nèi)容。
之后，我決定重新審視我的舊 Codepen，多語言倒計時，并制作一個純 CSS 版本：
locale如果您想要其他語言，您可以在 JS 代碼中使用：
但性能呢？CSS 可能不會像 JavaScript 那樣阻塞主線程，但我們能確定它使用 GPU 而不是 CPU 嗎？
有一個老技巧：
.useGpu {
transform: translateZ(0);
will-change: transform;
}
然后，在開發(fā)工具中，轉(zhuǎn)到“圖層”：
看到“倒計時”現(xiàn)在如何擁有自己的渲染層了嗎？不確定這是否仍然適用，但我猜添加也沒什么壞處。
當我離開瀏覽器選項卡并返回時，純 CSS 時鐘沒有出現(xiàn)任何問題。也許是我等的時間還不夠長吧！但如果您遇到任何問題，請使用此事件重新計算時鐘的延遲：
document.addEventListener('visibilitychange', ()=> {
if (!document.hidden) { ... }
})
作為獎勵 - 這是一個模擬時鐘，我不久前做了：
鋒網(wǎng)訊，距離下一場最愛歌手的演唱會還有多長時間？距離奧運會開幕還有多久？距離新年的到來還有多少天？如果你對即將發(fā)生的某個事件充滿期待的話，你一定會在心里想著它究竟還有多少天才會到來，正是因為這些期待，插件 CountdownLS 應運而生。
從名字或許你就能夠猜到，CountdownLS 會將一個倒計時時鐘放置在鎖屏界面中，并以天數(shù)、小時數(shù)、分鐘數(shù)以及秒數(shù)作為顯示，除了提供的功能之外，CountdownLS 也有著不錯的顏值，極簡化的設計也和蘋果的設計語言所吻合。
要安裝 CountdownLS 你需要前往這里（可能要掛 VPN）下載插件文件，然后需要用到鎖屏小工具插件例如 lockHTML，如果你使用的是 lockHTML，你甚至可以通過長按的方式來在屏幕中移動倒計時時鐘。要修改日期和時間，你需要對“js”文件夾下的 config.js 文件進行編輯。在文件中你也可以修改項目的名字，這樣就能取代原來默認的“WWDC”字樣。
當然，為設備選擇一張漂亮的壁紙的話，就能夠更好地和倒計時時鐘搭配起來。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
