JavaScript-页面跳转1【基础】

最新推荐文章于 2024-01-04 10:47:59 发布

原创最新推荐文章于 2024-01-04 10:47:59 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

这段代码展示了两个页面互相跳转的实现，每个页面都包含一个计时器在指定时间后自动跳转回原页面，同时提供了点击按钮立即跳转的功能。计时器使用了JavaScript的setInterval和clearInterval方法，页面结构和样式用HTML和CSS定义。

页面一

 <style>
     div {
         width: 500px;
         height: 200px;
         border: 1px solid red;
         margin: 30px auto;
         text-align: center;
     }
     p {
         font-size: 30px;
     }
 </style>
</head>
<body>
    <div>
        <p>5s后自动跳转页面二</p>
        <button>点击跳转</button>
    </div>
    
    <script>
        const p = document.querySelector("p")
        const btn = document.querySelector("button") 
        // 1
        let i = 5
        let m = setInterval(function(){
            i = --i
            p.innerHTML = `${i}s后自动跳转页面二`
            if(i === 0) {
                clearInterval(m)
                location.href = '4location对象.html'
            }
        },500)
        // 2
        // setTimeout(function(){
        //     location.href = '4location对象.html'
        // },5000)
        // 3
        btn.addEventListener('click',function(){
            location.href = '4location对象.html'
        })
    </script>
</body>

页面二

<style>
     div {
         width: 500px;
         height: 200px;
         border: 1px solid rgb(94, 255, 0);
         margin: 30px auto;
         text-align: center;
     }
     p {
         font-size: 30px;
     }
 </style>
</head>
<body>
    <div>
        <p>7s后自动跳转页面一</p>
        <button>点击跳转</button>
    </div>
    
    <script>
        const p = document.querySelector("p")
        const btn = document.querySelector("button") 
        // 1
        let i = 7
        let m = setInterval(function(){
            i = --i
            p.innerHTML = `${i}s后自动跳转页面一`
            if(i === 0) {
                clearInterval(m)
                location.href = '3location对象.html'
            }
        },700)
        // 2
        // setTimeout(function(){
        //     location.href = '3location对象.html'
        // },7000)
        // 3
        btn.addEventListener('click',function(){
            location.href = '3location对象.html'
        })
    </script>
</body>