來用網址放跑馬燈吧！

最近常常在寫 SPA 網頁（Single Page Application），意思是說整個網頁從頭到尾沒有重新載入過，所有的內容都是用 JavaScript 動態載入的。更新網頁的內容很好理解，只需要改變 innerHTML 或是 textContent 就可以了，但是如果要改變網址列的網址呢？這時候就要用到 History API 了。

        history.pushState(state, title, url);
      

這樣我們就手動把網址列的網址改掉了，同時瀏覽記錄會被新增一筆。同時還有另外一個語法：

        history.replaceState(state, title, url);
      

這個語法則是把目前的瀏覽記錄改掉，不會新增一筆。

欸這時我就想了，如果我瘋狂不停地改網址，那這樣不就可以做出一些動畫效果了嗎？於是我就打開筆電寫寫看：

        <script>
    const text = "💀💀🔥🔥👆🤓👇";
    const chars = Array.from(text);
    let i = 0;
    setInterval(() => {
        const rotated = chars.slice(i).join("") + chars.slice(0, i).join("");
        history.replaceState(null, "", "/" + rotated);
        i = (i + 1) % chars.length;
    }, 200);
</script>
      