Animating URL (URL 跑马灯)

Posted on | In

URL中动态展示 emojis

一、效果


效果简言之就是在URL中实现动态效果，此处简介的是在URL中动态展示 emojis，效果见下视频。
效果可以访问 loop.chenkaikai.com/chick.html 查看。



二、实现


直接见下面代码，关键代码是： location.hash = XXXXX
即改变当前页面地址的 hash 值。
注：注意页面编码格式设置 utf-8


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<code><html>
<head>
<title>URL孵小鸡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>

var f = ['&#x1f95a;', '&#x1f423;', '&#x1f425;', '&#x1f424;'], tt, s = ['&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;', '&#x1f95a;'], 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></code>

三、弊端及改进


最大的弊端就浏览器的历史记录惨不忍睹，但是可以使用隐身模式进行访问。
改进点可以考虑使用：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


------ 本文结束 感谢阅读 ------
0%