JS: Timing jump

On the web page, it often appears. After the payment is successful or the submission is successful, a jump page will appear, showing how many seconds are left, and when it reaches zero seconds, it will jump to another page, as shown in the figure below.
Insert picture description here


 1. 首先写两个链接，一个是用来实现网页的倒计时效果，另一个是用来实现点击直接跳转
 2. 再来写另一个网页作为跳转页面（如果是用来访问其他网页也可直接加上网页名称）
 3. 直接跳转的这个链接是一个点击事件.
 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .one{
            position: absolute;
            border:black solid;
            background-color: white;
            height: 180px;
            width: 400px;
            margin-left: 400px;
            margin-top: 150px;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="one">
        <h2>提交成功</h2>
        <a href="javascript:;">5</a>
        <a href="javascript:;" onclick="delp()">秒后系统会自动跳转，也可以点击此链接跳转</a>
    </div>
    <script type="text/javascript">
        var as=document.querySelectorAll('a');
        var timer=4;
        var t=setInterval(function(){
            if(timer==0){
                clearInterval(t);
                location.href='index.html';
            }
            as[0].innerHTML=timer;
            timer--;
        },1000);
        function delp(){
            location.href='index.html';
        }
    </script>
</body>
</html>

Guess you like