js实现3秒自动跳转链接的功能

先获取span元素
然后获取当前倒计时秒数
再设置一个定时器，每执行一次倒计时显示函数

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-06-12 15:21

关注

引自免费微信小程序：皆我百晓生

要实现这个需求，我们可以通过以下步骤来完成：

首先，获取页面上的span元素。
然后，设置一个初始的倒计时秒数。
使用setInterval方法来每秒更新倒计时，并在倒计时结束后执行跳转。

下面是具体的代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时跳转</title>
<style>
    body {
        background: gray;
    }
    div {
        margin: 20px auto;
        width: 350px;
        height: 150px;
        border: 1px solid #000;
        background: white;
        padding: 10px;
    }
    h2 {
        text-align: center;
    }
    span {
        font-size: 150%;
        color: red;
        margin: 0 10px;
    }
</style>
</head>
<body>
<div>
    <h2>提交成功</h2>
    <a href="http://www.example.com">
        <span id="seconds">3</span>秒后系统会自动跳转，也可单击此链接跳转
    </a>
</div>
<script>
    // 获取span元素对象
    var secondsSpan = document.getElementById('seconds');
    
    // 初始倒计时秒数
    var seconds = parseInt(secondsSpan.textContent, 10);
    
    // 设置定时器，每秒执行一次倒计时显示函数
    var timer = setInterval(function() {
        seconds--;
        
        // 如果倒计时秒数为0，清除定时器，载入目标页面
        if (seconds <= 0) {
            clearInterval(timer);
            location.assign("http://www.example.com");
        } else {
            // 如果倒计时秒数不为0，倒计时秒数自减1，重新设置span元素对象的文本内容
            secondsSpan.textContent = seconds;
        }
    }, 1000); // 每1000毫秒(1秒)执行一次
</script>
</body>
</html>

这段代码实现了你所描述的需求，即当页面加载后，会开始从3秒倒计时，到达0秒时，页面将自动跳转至http://www.example.com。同时，用户也可以点击链接手动跳转。

本回答被题主选为最佳回答 , 对您是否有帮助呢?