需求
- 页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面
案例分析
- 页面上创建一个span用于显示变化的数字,点返回链接直接跳转。
- 定义一个变量为5,每过1秒调用1次刷新refresh()函数
- 编写函数,修改span中的数字
- 判断变量是否为1,如果是1则跳转到新的页面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时跳转到另一个页面</title>
</head>
<body>
<body>
<a href="https://www.google.com/">直接跳转</a>
<span id="time">5</span>秒后回到主页
<script type="text/javascript">
//定义一个变量为5
var count = 5;
//一开始就执行
window.setInterval("refresh()", 1000);
function refresh() {
if (count >= 0 ) {
//修改span中的数字
document.getElementById("time").innerText = count--;
}else {
location.href = "http://www.google.com";
}
}
</script>
</body>
</html>
效果