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">5spen>秒之后自动跳转页面 ...
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">5spen>秒之后自动跳转页面 ...
p>

body>
html>

 

          

你可能感兴趣的:(HTML + CSS + JavaScript 实现简单的自动跳转页面)