JavaScript 倒计时页面跳转

今天学习JavaScript，看到一个页面跳转的实例，联想起我们做的ITOO考试系统的交卷页面和访问网站的时候提交数据成功或者出现错误页面跳转，效果是一样的。

代码展示：

<!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; /*居中*/
            padding-top:300px; /*距离顶部300px*/
            font-size: 50px; /*字体大小*/
            color: purple; /*字体颜色*/
            font-family:STCaiyun  ; /*设置字体为华文彩云*/
        }
    </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" style="color:red ">6</span>秒后跳转到主页</p>
</body>

</html>

效果图：

JavaScript 倒计时页面跳转

小结：JavaScript 可以创建动态HTML页面，从而高效地控制页面的内容，增加客户端的体验，让网页更加有动感、有魅力。JavaScript非常有趣！

秒客网

JavaScript 倒计时页面跳转

相关文章