七夏 发表于 2024-9-30 09:57:14

炫酷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;
    }
}JavaScript代码：
(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
+"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
63-!y>x++;o+=`(r=${r})()`.fontcolor(c?"#FF0":"#444"))c=x/2
%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
D=Date())?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()
作者：南城FE
链接：https://juejin.cn/post/7375419781132173339
来源：稀土掘金

七夏 发表于 2024-9-30 09:58:05

把眼眯起来能看得清一点{:1_268:}

梦淡如非 发表于 2024-9-30 11:00:41

这玩意儿，费眼睛。

沐辰ya 发表于 2024-9-30 11:39:16

厉害

七夏 发表于 2024-9-30 12:50:07

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

确实是，对比色反差调的明显点还能好点{:1_313:}
页: [1]
查看完整版本: 炫酷JavaScript文本时钟