一、效果
效果简言之就是在URL中实现动态效果，此处简介的是在URL中动态展示 emojis，效果见下视频。
效果可以访问 loop.chenkaikai.com/chick.html 查看。
二、实现
直接见下面代码，关键代码是： location.hash = XXXXX
即改变当前页面地址的 hash 值。
注：注意页面编码格式设置 utf-8
<html>
<head>
<title>URL孵小鸡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var f = ['🥚', '🐣', '🐥', '🐤'], tt, s = ['🥚', '🥚', '🥚', '🥚', '🥚', '🥚', '🥚', '🥚', '🥚', '🥚'], indexNext, m = 40;
function loop() {
tt = 0;
let index = Math.floor(new Date()/(m*2*s.length)%f.length);
indexNext = (index + 1)%f.length;
loop2();
setTimeout(loop, m*s.length);
}
function loop2() {
if (tt < s.length) {
setTimeout(loop2, m);
s[tt] = f[indexNext];
tt++;
location.hash = s.join('');
}
}
</script>
</head>
<body onLoad="loop()">
</body>
</html>三、弊端及改进
最大的弊端就浏览器的历史记录惨不忍睹，但是可以使用隐身模式进行访问。
改进点可以考虑使用：replaceState() 和 pushState()
四、参考
视频：https://www.youtube.com/watch?v=4YZt4HEv48Y
文档：http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/
emoji：https://unicode.org/emoji/charts/full-emoji-list.html
文章评论