炫酷 JavaScript 文本时钟
今天分享一段简单的 JS 代码,创意来自aem1k.com/qlock
,可以将整段 JS 代码字符本身变成时钟,每秒以 HH:MM:SS
的格式显示当前的时间。
JS 逻辑实现代码本身也是时钟展示的载体,通过给字符设置不同的高亮颜色来显示当前的时间,离屏幕越远越能更清晰的看到时间的变化。
本文解析该代码实现的原理,来看看这份属于程序员的浪漫吧。
代码是一个自执行的匿名函数 (r=()=>...)()
,这意味着定义函数的同时立即执行它。
1. 定时器
这里使用 setInterval
创建一个每 100 毫秒执行一次的定时器,用于更新时钟显示。
2. 循环构建显示内容
这个循环从
y=5
开始,每次减 1,直到y
为 0。o
是用来累积最终要显示的字符串。每次循环结束,都会更新
document.body.innerHTML
来显示当前的o
,即时钟的当前状态。
3. 内部循环构建每一行
这个内部循环处理每一行的字符,从
x=-1
开始,直到x=62
。字符串
(r=${r})()
是函数自身的字符串表示,用于生成时钟的每个字符。j++
用于遍历上述字符串中的每个字符。.fontcolor(c ? "#FF0" : "#444")
根据条件c
设置字符颜色。
4. 时间和字符映射
这行代码是核心,它决定了每个字符是否显示。
Date()[16+(x/8|0)]
获取当前时间的某个部分。字符串
"odRFacb67o2vi5gmOZmwFNteohbOh3sw"
用于根据时间生成一个整数,这个整数的二进制表示决定了哪些字符需要被高亮显示。
字符串 "odRFacb67o2vi5gmOZmwFNteohbOh3sw" 在这段代码中起到了关键的编码作用,用于决定哪些字符应该被显示以形成时钟的数字。这个字符串看似随机,实际上是经过特定编码的,每个字符在 36 进制下代表一个特定的数值,这些数值的二进制形式决定了字符的显示状态。
总结
这段代码通过巧妙地使用字符串操作和位运算,结合定时器不断更新显示内容,实现了一个基于文本的时钟显示。每个字符的显示与否取决于当前时间与预设字符串的位运算结果,这种方法虽然不直观,但这段 JavaScript 代码是一个非常有趣的例子,它使用了一种创意方法来显示一个基于字符的时钟。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/6a346d8f939c268119eec2839】。文章转载请联系作者。
评论