JS——倒数跳转页面

爱被打了一巴掌 2022-06-04 09:27 418阅读 0赞

最近在JavaScript视频，里面有很多实用的例子！昨天敲了一个“倒数跳转页面”的例子，觉得挺有用的，有的时候在网上答题交卷时，提交完会有倒计时多少秒之后关闭，下面就简单讲讲实现方法。

一、代码如下：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
        <title>倒数跳转页面</title>
    
        <style type ="text/css" >
            /*P标签样式*/
            p {
                text-align :center; /*居中*/
                font-size:50px;     /*字体大小*/
                color:red;          /*字体颜色*/
            }
        </style>
    
        <script type="text/javascript" >
            onload = function () {
                var span = document.getElementById("second");
                // setInterval就是开启一个计时器，里面传入一个方法和一个时间
                // 表示每隔这个时间间隔调用一次这个方法
                var intervalId = setInterval(function () {
                    // var num = span.innerHTML - 1;    //等价下面三行
                    //innerHTML：获得或设置一个标签下的内容（内容可以是HTML格式的）：
                    var numstr = span.innerHTML;
                    var num = parseInt(numstr);
                    num--;
    
                    span.innerHTML = num;
    
                    if (num <= 0) {
                        // 停下计时器
                        clearInterval(intervalId);
                        //跳转到百度首页
                        location.href = "https://www.baidu.com/";
                    }
                }, 1000);
    
            };
        </script>
    </head>
    
    <body>
         <p>请等待<span id="second">10</span>秒后跳转</p>
    </body>
    
    </html>

二、效果图：

倒计时：

![Center][]

跳转百度首页：

![Center 1][]

[Center]: /images/20220604/386e51c37379462295e2e2064e5fc145.png
[Center 1]: /images/20220604/251074928f0843beb61bff352445a247.png