JavaScript倒计时跳转到另一个页面

需求

  • 页面上显示一个倒计时5秒的数字，到了5秒以后跳转到另一个页面

案例分析

  1. 页面上创建一个span用于显示变化的数字，点返回链接直接跳转。
  2. 定义一个变量为5，每过1秒调用1次刷新refresh()函数
  3. 编写函数，修改span中的数字
  4. 判断变量是否为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>

效果

在这里插入图片描述
在这里插入图片描述