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>

posted @ 2020-03-01 17:19 LeeHua 阅读(2361) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

Lee Hua's Blog

热爱编程 -- 写Bug

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

公告

我的标签

积分与排名

随笔分类 (240)

随笔档案 (226)

阅读排行榜

推荐排行榜

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

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

	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);

	<!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>