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

zhangsan3333

已于 2022-06-03 13:45:00 修改

阅读量1.3k

点赞数

文章标签： JavaScript 倒计时页面跳转计时器 DOM操作

于 2022-06-03 13:29:13 首次发布

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/125112060

版权

需求

页面上显示一个倒计时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>