【网页】一个非常简单,但是比较精确的数字时钟

https://pages.izyx.xyz/simple-clock/

一个非常简单的数字时钟。

这个功能的网页实在太多了,但可能出于性能的考虑???一些网页在时间更新时,对于小时和分钟的数值,并不是每次都进行检测和更新。这也是很合理的,毕竟这两个数据的更新频率本来就很低。

但是,如果网页处于后台,JS 的运行是可能被暂停的。以及在其他一些应用场景中也可能遇到 JS 被暂停运行的情况。那么在恢复运行之后,时间就变得对不上了。甚至需要等待很长时间,才能够让数值恢复正常,这种情况让人感到非常尴尬。

所以这个网页会在每一次更新时间时都检测所有数值,但只有在发生改变时才更新页面的元素。这样占用的系统资源依旧非常低,但可以很好的保证时间显示的精确度。

同时考虑到 JS 被暂停运行再恢复的情况,加入了一个更高频率的守护进程,确保在恢复运行后第一时间更新时间显示。

目前本网在 Chrome 下运行,内存占用大概 120KB,几乎不会引起 CPU 数值的变化,可以很放心的用做桌面动态壁纸或者浏览器的新标签页。

如果在网址的后面加一个井号,后面书写任意内容,则可以隐藏最后的“秒”显示,同时降低时间更新检测的频率,让页面变得更加节能。

参数说明

  • second:设置为 1 则显示秒钟(默认),设置为 0,隐藏秒钟;
  • zoom:缩放系数,可以设置为任意正整数。100 大概是正好占满当前显示区域(宽高等比例缩放),默认为 60

参数使用举例

https://pages.izyx.xyz/simple-clock/?second=0&zoom=100

现在界面显示会自动适配各种情况。

请老鼠喝杯咖啡可好?老鼠爱发电

请问怎么设成桌面动态壁纸呢?

使用壁纸引擎(Wallpaper engine),可以 Steam 里面购买,国内也有一些类似的免费软件,不过我个人还是更偏向使用壁纸引擎,反正我也买了

我喜欢午睡的时候打开 time.is 这个网页最大化,微微睁眼看下时间继续睡or起来工作。

哦,没用

感谢,搞定了。不过这个时钟网页的时钟有点太大了,要是可以选择就更完美了

蛮好的,但是页面自适应好像有一点点问题

判断一下 dev最大宽度≤视窗宽度dev最大高度≤视窗高度 会比较好吧

P.S. head里加上这个可以iOS全屏

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

加上Web App Manifest可以Android和Windows全屏

    <link rel="manifest" href="manifest.json">
1 Like

我就没适配竖屏,因为做的就是当做电脑桌面的动态壁纸的。

下一版考虑一下,加入动态适配

现在可以自己设定缩放比例了(方法看主贴)。

这个尺寸调节相对复杂一点,单纯用 CSS 很难调到理想的状况,现在用 JS 控制界面进行实时调整。

这些不打算做了,因为这个本身的出发点并不是一个单独的应用。而是作为某些情况下的功能组件。比如动态壁纸,比如新标签页。所以最初就是演示功能,顺便吐槽那些考虑不周的作者(我居然在动态壁纸和新标签页上都遇到了这样的问题),其他方面都是极度精简的。