让URL动起来

[imuncle]

今天发现一个非常有意思的项目，原地址在这里：Animating URLs with Javascript and Emojis

你可以把浏览器的URL地址变成数个emoji的合成的一张动态图：

还有钟表：

用emoji制作进度条：

除了使用emoji之外，我们还可以用代码绘制几何图形，也可以做出有趣的效果。

我们可以绘制Box-drawing Characters

使用JavaScript的fromCharCode()方法，就可以将 Unicode 编码转为一个字符。

我最喜欢的效果如下：

实现的代码如下：

function loop() {
        var i, n, s = '';

        for (i = 0; i < 10; i++) {
            n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;

            s += String.fromCharCode(0x2581 + n);
        }

        history.replaceState(null, null, s);

        setTimeout(loop, 50);
}

loop();

原文作者的方法是直接跳转至一个新的URL页面，这样会产生海量的浏览器历史记录，我这里使用了historyreplaceState()方法，可以在不刷新页面的情况下改变URL的值，详情见修改url而不刷新页面

但这样有一点不好，就是不能刷新页面，毕竟URL都被改变了。

最后，我们甚至可以将多个窗口的URL结合起来，玩！游！戏！（Games and Graphics in Popup URL bars）

不得不说这脑洞是真的大，太有意思了！