【JS狠活】178字符实现显示时间-优快云博客

前言

看到标题别疑惑，你肯定认为：显示个时间有什么难的？
但是你写的大多数是这样的：

var date = new Date();
setInterval(function(){
  document.body.innerHTML = date.getHours() + ":";
  document.body.innerHTML += date.getMinutes() + ":";
  document.body.innerHTML += date.getSeconds();
}, 1000);

但实际上，用不上那么多字符！
如果你会join()函数，你可能会把循环执行的函数部分怎么写：

document.body.innerHTML = [date.getHours(), date.getMinutes(), date.getSeconds()].join(":");

但是这样不整齐，会变成这样
13:4:2
于是，身为大聪明的你又想到了padStart()函数，然后变成了这么一堆乱七八糟的东西：

document.body.innerHTML = [date.getHours().padStart(2,"0"), 
date.getMinutes().padStart(2,"0"), 
date.getSeconds().padStart(2,"0")];

在一旁看着的我实在看不下去了，觉定露一手：

代码

多行版

eval(z='with(new Date()){a=[getHours(),getMinu\
tes(),getSeconds()].map(String);for(i=0;i<3;i+\
+)a[i]=a[i].padStart(2,0);document.body.innerH\
TML="<pre>"+a.join(":");setTimeout(z)}')/*RY3*/

单行版

eval(z='with(new Date()){a=[getHours(),getMinutes(),getSeconds()].map(String);for(i=0;i<3;i++)a[i]=a[i].padStart(2,0);document.body.innerHTML="<pre>"+a.join(":");setTimeout(z)}')
//或者这样子（多一个字符）
z=()=>{with(new Date()){a=[getHours(),getMinutes(),getSeconds()].map(String);for(i=0;i<3;i++)a[i]=a[i].padStart(2,0);document.body.innerHTML="<pre>"+a.join(":");setTimeout(z)}}z()

相信作为宇宙无敌超级大聪明的你，又双叒叕看出来了，上面代码风格有一点点眼熟，没错，这种风格来自Martin Kleppe(aemkei)，就是那个写出了Hello World 1K的大神，他代码大多数都是这种自执行函数和语句。

不敢说我学到了精髓，但模仿还是会的 —— 我自己

解析

规范化的代码

z = function() {
    with(new Date()) {
        a = [getHours(), getMinutes(), getSeconds()].map(String);
        for (i = 0; i < 3; i++) a[i] = a[i].padStart(2, "0");
        document.body.innerHTML = "<pre>" + a.join(":");
        setTimeout(z)
    }
}
z()