JavaScript文本时钟

今天分享一段简单的 JS 代码,创意来自aem1k.com/qlock,可以将整段 JS 代码字符本身变成时钟,每秒以 HH:MM:SS 的格式显示当前的时间。

JS逻辑实现代码本身也是时钟展示的载体,通过给字符设置不同的高亮颜色来显示当前的时间,离屏幕越远越能更清晰的看到时间的变化。

本文解析该代码实现的原理,来看看这份属于程序员的浪漫吧。

代码是一个自执行的匿名函数 (r=()=>...)(),这意味着定义函数的同时立即执行它。

1. 定时器

这里使用 setInterval 创建一个每100毫秒执行一次的定时器,用于更新时钟显示。

   setInterval(t=>{...}, 100)

2. 循环构建显示内容

   for(j=o="n",y=5;y--;document.body["innerHTML"]="<pre>&lt"+(S="script>n")+o+"nn&lt/"+S)
  • 这个循环从 y=5 开始,每次减1,直到 y 为0。
  • o 是用来累积最终要显示的字符串。
  • 每次循环结束,都会更新 document.body.innerHTML 来显示当前的 o,即时钟的当前状态。

3. 内部循环构建每一行

   for(x=-01; 63-!y>x++; o+=`(r=${r})()`[j++].fontcolor(c?"#FF0":"#444"))
  • 这个内部循环处理每一行的字符,从 x=-1 开始,直到 x=62
  • 字符串 (r=${r})() 是函数自身的字符串表示,用于生成时钟的每个字符。
  • j++ 用于遍历上述字符串中的每个字符。
  • .fontcolor(c ? "#FF0" : "#444") 根据条件 c设置字符颜色。

4. 时间和字符映射

   c=x/2 % 4 < 3 && parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y
  • 这行代码是核心,它决定了每个字符是否显示。
  • Date()[16+(x/8|0)] 获取当前时间的某个部分。
  • 字符串 "odRFacb67o2vi5gmOZmwFNteohbOh3sw" 用于根据时间生成一个整数,这个整数的二进制表示决定了哪些字符需要被高亮显示。

字符串 “odRFacb67o2vi5gmOZmwFNteohbOh3sw” 在这段代码中起到了关键的编码作用,用于决定哪些字符应该被显示以形成时钟的数字。这个字符串看似随机,实际上是经过特定编码的,每个字符在36进制下代表一个特定的数值,这些数值的二进制形式决定了字符的显示状态。

图片

总结

这段代码通过巧妙地使用字符串操作和位运算,结合定时器不断更新显示内容,实现了一个基于文本的时钟显示。每个字符的显示与否取决于当前时间与预设字符串的位运算结果,这种方法虽然不直观,但这段 JavaScript 代码是一个非常有趣的例子,它使用了一种创意方法来显示一个基于字符的时钟。

原创文章,作者:guozi,如若转载,请注明出处:https://www.sudun.com/ask/88359.html

(0)
guozi's avatarguozi
上一篇 2024年6月3日 下午5:13
下一篇 2024年6月3日 下午5:14

相关推荐

  • 如何选择最适合苏州地区的云服务器?

    云服务器,这是一个近年来备受瞩目的行业。随着互联网的发展,越来越多的企业开始转向云服务器,以提升自身的数字化能力。而在苏州这样一个经济发达、科技兴盛的城市,云服务器市场更是蓬勃发展…

    行业资讯 2024年3月20日
    0
  • 反向代理 http,反向代理域名转发原理

    近来互联网行业最热门的话题之一就是“BT反向代理域名被封”。此消息引起了广大网友的关注,人们对“什么是BT反向代理?”感兴趣。它有什么特点和好处?为什么会被屏蔽?这一事件会对互联网…

    行业资讯 2024年5月18日
    0
  • 如何监控服务器的安全性?

    现在的网络安全加速行业发展迅速,随之而来的也是服务器安全性问题的日益突出。如何监控服务器的安全性,成为了各大企业和个人关注的焦点。但是,什么是网络安全加速行业?为什么需要监控服务器…

    行业资讯 2024年3月28日
    0
  • 湖南营销型网站建设

    你是否曾经听说过营销型网站?它究竟是什么样的网站,又有着怎样的功能和作用?在当今数字化时代,营销型网站已经成为企业宣传和推广的重要手段。而在湖南,一个充满活力的经济大省,营销型网站…

    行业资讯 2024年4月5日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注