js修改地址栏url_使用JS和Emojis让你的地址栏动起来

我们知道实际上现代的URL是可以使用emoj符号(以及其他unicode字符)。但是这样做的可能先得有点非主流而且会严重影响网站的SEO，所以很少有人这样用过。但是作为一种技术尝试这是一个很有意义的事情，那么今天虫虫就带领大家一起来做这件有意义的技术尝试。具体来说就是通过JS让这些字符动起来。

Loop循环

在JS代码中要支持emoj符号，首先要确保页面的JS代码标记为UTF-8。我们可以通过通过HTTP标头或META标签来完成设置：

为了实现我们在地址栏中的URL可以动起来，实际上只需要一个循环。实例代码如下：

这是我们的第一个循环，一个旋转的表情符号的月亮。运行效果如下：

时钟

当然这个旋转的月亮可以换成任何表情符号，只需对f数组赋值不同的表情即可。比如一个时钟：

var f = ['', '', '', '', '', '', '', ''];

效果如下：

变脸娃娃

上面的例子太简单，让我们增加点难度。这我们给loop函数做些修改，让它生成的是一个包含多个表情符号的字符串。这次我们使用emoji 的换肤器做修饰，最后结果是一个变脸娃娃：

执行效果如下：

代码解释：

在loop函数中，我们使用了一个我们使用的正弦函数Math.sin()来生成颜色参数，有有系统时间和循环变量控制的位置来作为正弦函数的参数。

月相动态

回到我们第一个月亮的例子，我是使用一个加载器来实现夺个月亮加载，并呈现不同月亮状态的情形。代码如下：

运行效果

其他Unicode字符

波浪图

开始时候说了，我们不光可以使用emoji，也能使用任何的Unicode字符，比如下面这些用来组合形状的Unicode字符

我们可以让他们组合成很多二维的形状，下面的例子我们创建了有多个高度变化的字符块生成的波浪图：

运行效果如下：

进度条

我们把上面例子中的高度变化换成高度的变化，让其水平摆动，就是一个进度条：

运行效果如下：

视频进度条

上面这些小玩意基本上都是好玩，中看不中用。那我们再来做一个实用的东西，显示在线视频播放的进度，这个也不难，我们只需躲附加一个函数，将进度条中用的字符串替换为视频的"timeupdate"即可，就可以在URL显示的视频进度，包括时常，当前播放时间：

运行效果如下：

怎么样？很有型吧，当然这个虚实线有圆构成进度条也可以换成其他的，比如前面我生成的月相图可以挪过来用：

运行效果如下：

总结

本文我们一起探索了使用JS和Emojis实现Url动态效果的技术实现。最后贴一下具体实现时候的html页面的框架代码：

只需把我们各种动画JS代码贴到上面框架中的script部分，然后通过url(必须虚拟站点形式)打开，就可以在地址栏看到效果了。如果感兴趣请关注虫虫，可以和虫虫一起讨论，并索取全部的源码。