HTML 倒计时跳转

BOM -延迟跳转

5秒钟之后会自动跳转到百度

跳转倒计时方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM -延迟跳转</title>
</head>
<body>
 <h3><span id="countdown">5</span>秒钟之后会自动跳转到百度</h3>
 <button id="cancelBtn">取消跳转</button>
 <button id="openBtn">打开百度</button>
</body>
<script>
    const openBtn =document.getElementById('openBtn')
    openBtn.addEventListener('click',()=>print())
    const cancelBtn = document.getElementById("cancelBtn")
    cancelBtn.addEventListener('click',()=>clearInterval(timerId))
    const span =document.getElementById('countdown')
    var counter =5
    var  timerId =setInterval(function(){
        counter -=1
        if(counter ==0){
            location.href ='http://www.baidu.com'
        }else{
            span.textContent =counter
        }
    },1000)
</script>
</html>

posted on 2023-04-04 11:09 kevin_yang123 阅读(278) 评论(0) 收藏举报