Jquery 实现倒计时跳转到指定页面或关闭窗口

封面图 • 2025-11-04 • jQuery

使用 jQuery 实现倒计时跳转到指定页面或关闭窗口是一个常见的需求，比如在登录失败后提示用户重新登录，或者在注册成功后跳转到首页等。下面我将提供一个完整的示例，包括：

1. **倒计时功能**（从 10 秒开始）
2. **跳转到指定页面**
3. **关闭当前窗口**（可选）

---

## ✅ 示例：jQuery 倒计时跳转或关闭窗口

### HTML 部分
```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>倒计时跳转</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

// 每秒更新一次
    var countdownInterval = setInterval(function () {
        timeLeft--;
        $('#countdown').text('倒计时：' + timeLeft + ' 秒');

if (timeLeft <= 0) {
            clearInterval(countdownInterval);

// 跳转到指定页面
            // window.location.href = "https://www.example.com";

// 或者关闭当前窗口
            // window.close();

// 如果你希望跳转和关闭都执行，可以同时写
            // window.location.href = "https://www.example.com";
            // window.close();
        }
    }, 1000);
</script>

</body>
</html>
```

---

## 🔍 功能说明

- `setInterval`：每秒更新一次倒计时。
- `clearInterval`：当倒计时结束时停止定时器。
- `window.location.href`：用于跳转到指定页面。
- `window.close()`：用于关闭当前窗口（注意：某些浏览器可能会阻止此操作，尤其是非弹出窗口）。

---

## ⚠️ 注意事项

1. **`window.close()` 的限制**：
   - 只能在通过 JavaScript 打开的窗口中使用（例如通过 `window.open()` 打开的窗口）。
   - 在大多数浏览器中，直接关闭当前窗口是不允许的，除非用户主动触发（如点击按钮）。

2. **跳转页面建议**：
   - 使用 `window.location.href` 是更可靠的方式。
   - 如果你想让用户选择是否跳转，可以加一个“立即跳转”按钮。

---

## 🔄 可选：添加“立即跳转”按钮

```html
<a href="https://www.example.com" id="jumpLink" style="display:none;">立即跳转</a>
```

```javascript
if (timeLeft <= 0) {
    clearInterval(countdownInterval);
    $('#jumpLink').show(); // 显示跳转链接
}
```

---

如果你有其他需求，比如倒计时显示为 `00:00:10` 格式、支持暂停/继续等，也可以告诉我，我可以进一步扩展这个功能。