JavaScript实战练习

1 案例

1.1 轮播消息提示

1
2

4.1 根据哈希值切换页面的显示内容

const contentEl = document.querySelector('.content');
window.addEventListener("hashchange", () => {
    switch(location.hash) {
        case "#/home":
            contentEl.innerHTML = "Home";
            break;
        case "#/about":
            contentEl.innerHTML = "about";
            break;
        default:
            contentEl.innerHTML = "default";
    }
})

4.2 阻止默认跳转行为在本页面显示内容

HTML5的History

有六种模式改变URL而不刷新页面

replaceState：替换原来的路径
pushState：使用新的路径
popState：路径的回退
go：向前或向后改变路径：e.g. go(1) go(-1) go(2)
forward：向前改变路径
back：向后改变路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=script, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="/home">home</a>
        <a href="/about">about</a>
        <div class="content">default</div>
    </div>
    <script>
        const contentEl = document.querySelector('.content');
        const aEls = document.getElementsByTagName('a');
        for(let aEl of aEls) {
            aEl.addEventListener("click", e => {
                e.preventDefault();  // 阻止默认的跳转操作
                const href = aEl.getAttribute('href');
                history.pushState({}, "", href);
                changeContent();
                // console.log(location.pathname);
            })
        }
        // 点击浏览器回退页面，可以理解为进栈出栈
        window.addEventListener("popstate", () => {
            changeContent();
        })
        const changeContent = () => {
            switch(location.pathname) {
                case "/home":
                    contentEl.innerHTML = "Home";
                    break;
                case "/about":
                    contentEl.innerHTML = "About";
                    break;
                default:
                    contentEl.innerHTML = "Default";
            }
        }
    </script>
</body>
</html>