用JS和emoji点缀这个圣诞

Posted by Coink on December 24, 2018

首先是送自己一顶帽子:

avatar_christmas.png

然后放上一曲圣诞BGM:Lost my pieces - 橋本由香利

看着大家幸福的笑脸,圣诞的意义就是这样呀。

扯远了,回来(

瞎说原理

浏览器的window.location.hash部分是可控的,通常用于控制页面内定位。我们可以通过控制hash,装饰一下url。

假设有这样一个url:

https://example.com/index.html#hello

获取location.hash可以得到:

Snipaste_2018-12-24_11-20-10.png

同理,用js对这部分进行操作即可。

不过这么玩会有个小问题,浏览器的前进后退在这个页面上会不起作用(

实现

setInterval(function () { window.location.hash = "🎄"; }, 1000);
setInterval(function () { window.location.hash = "🎁"; }, 2000);

当然文字也是可以的

setInterval(function () { window.location.hash = "Merry"; }, 1000);
setInterval(function () { window.location.hash = "Christmas"; }, 2000);

在线调试的时候记得勾上Disable cache

cache.png

预览:

index.gif

圣诞相关的emoji:

🎄 ⛄ 🎁 ❄ 🎅 👪 🎶 🔥 🔔 🌟

圣诞快乐,大家。