炫酷JavaScript文本时钟

炫酷JavaScript文本时钟

今天分享一段简单的 JS 代码，创意来自aem1k.com/qlock，可以将整段 JS 代码字符本身变成时钟，每秒以 HH:MM:SS 的格式显示当前的时间。
JS逻辑实现代码本身也是时钟展示的载体，通过给字符设置不同的高亮颜色来显示当前的时间，离屏幕越远越能更清晰的看到时间的变化。
本文解析该代码实现的原理，来看看这份属于程序员的浪漫吧。
代码是一个自执行的匿名函数 (r=()=>...)()，这意味着定义函数的同时立即执行它。

CS代码：

1. body {
   
2.     background-color: black;
   
3.     color: #0FF;
   
4.     height: 100%;
   
5.     margin: 0;
   
6.     padding: 0;
   
7.   }
   
8.   
   
9.   pre {
   
10.     font-family: "Fira Mono", monospace;
    
11.     margin: auto;
    
12.     width: 38em;
    
13.     top: 50%;
    
14.     left: 50%;
    
15.     position: absolute;
    
16.     margin-top: -5.5em;
    
17.     margin-left: -19em;
    
18.   }
    
19. 
    
20.   @media screen and (min-width: 900px) {
    
21.     body {
    
22.       font-size: 18px;
    
23.     }
    
24.   }

复制代码

JavaScript代码：

1. (r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
   
2. +"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
   
3. 63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?"#FF0":"#444"))c=x/2
   
4. %4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
   
5. 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
来源：稀土掘金

把眼眯起来能看得清一点

这玩意儿，费眼睛。

厉害

梦淡如非 发表于 2024-9-30 11:00
这玩意儿，费眼睛。

确实是，对比色反差调的明显点还能好点