HTML + CSS + JavaScript 实现简单的自动跳转页面

要求：5秒后自动跳转到https://www.google.com页面

步骤分析

分析：
   1.显示页面效果  <p>
   2.倒计时读秒效果实现
       2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
       2.2 定义一个定时器，1秒执行一次该方法
   3.在方法中判断时间如果<= 0 ，则跳转到首页

步骤实现

第一步：显示页面效果

<p align="center">
    <spen id="time">5</spen>秒之后自动跳转页面 ...
</p>

第二步：CSS描述显示

<style>
    p {
        text-align: center;
    }

    #time {
        color: red;
    }
</style>

第三步：定义一个方法，获取spen标签，修改spen标签的内容（时间减1）

var second = 5;
function showTime() {
    second --;
    if(second >= 0) {
        // 获取spen标签对象
        var elementById = document.getElementById("time");
        // 修改span标签体内容
        elementById.innerHTML = second + "";
    } else {
        location.href = "https://www.google.com";
    }
}

第四步：定义一个定时器，每隔一秒钟，执行一次定义的showTime方法

// 每隔 1 秒执行一次showTime方法
setInterval(showTime, 1000);

所有步骤代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转页面</title>

    <style>
        p {
            text-align: center;
        }

        #time {
            color: red;
        }
    </style>

    <script>
        var second = 5;
        function showTime() {
            second --;
            if(second >= 0) {
                // 获取spen标签对象
                var elementById = document.getElementById("time");
                // 修改span标签体内容
                elementById.innerHTML = second + "";
            } else {
                location.href = "https://www.google.com";
            }
        }

        // 每隔 1 秒执行一次showTime方法
        setInterval(showTime, 1000);
    </script>
</head>
<body>

<p align="center">
    <spen id="time">5</spen>秒之后自动跳转页面 ...
</p>

</body>
</html>