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>
本文来自博客园,作者:LeeHua,转载请注明原文链接:https://www.cnblogs.com/liyihua/p/12390771.html