马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
炫酷JavaScript文本时钟
今天分享一段简单的 JS 代码，创意来自aem1k.com/qlock，可以将整段 JS 代码字符本身变成时钟，每秒以 HH:MM:SS 的格式显示当前的时间。
JS逻辑实现代码本身也是时钟展示的载体，通过给字符设置不同的高亮颜色来显示当前的时间，离屏幕越远越能更清晰的看到时间的变化。
本文解析该代码实现的原理，来看看这份属于程序员的浪漫吧。
代码是一个自执行的匿名函数 (r=()=>...)()，这意味着定义函数的同时立即执行它。
CS代码：
- body {
- background-color: black;
- color: #0FF;
- height: 100%;
- margin: 0;
- padding: 0;
- }
-
- pre {
- font-family: "Fira Mono", monospace;
- margin: auto;
- width: 38em;
- top: 50%;
- left: 50%;
- position: absolute;
- margin-top: -5.5em;
- margin-left: -19em;
- }
- @media screen and (min-width: 900px) {
- body {
- font-size: 18px;
- }
- }
- (r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
- +"erHTML"]="<pre><"+(S="script>\n")+o+"\n\n</"+S)for(x=-01;
- 63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?"#FF0":"#444"))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},100))()
作者：南城FE
链接：https://juejin.cn/post/7375419781132173339
来源：稀土掘金
| 
