<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id = "time">5</span>秒之后,自动跳转到首页...
</p>
<script>
/*
分析:
1.显示页面效果 <p>
2.倒计时读秒效果实现
2.1 定义一个方法,获取span标签,修改span标签体内容时间--
2.2 定义一个定时器,1秒执行一次该方法
3. 在方法中判断 时间<=0 , 则跳转到首页
*/
// 显示倒计时效果:
var second = 5
function showTime(){
second--;
if(second<=0) {
location.href = "http://www.baidu.com"
}
var time = document.getElementById("time");
time.innerHTML = second+""
}
// 设置定时器,1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
前端案例——倒计时自动跳转到首页
最新推荐文章于 2023-07-17 15:28:36 发布