JavaScript实现5秒后跳转界面(附完整源码)

源代码大师

于 2023-11-04 00:03:25 发布

阅读量6.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript实战教程文章标签： javascript 开发语言 ecmascript

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/134212892

JavaScript实战教程专栏收录该内容

950 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript实现5秒倒计时并在结束时自动跳转到新页面。提供了完整的HTML和JavaScript代码示例，倒计时期间页面会实时更新剩余时间。

JavaScript实现5秒后跳转界面

以下是基于纯JavaScript实现5秒后跳转界面的完整源码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>5秒后跳转界面</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>欢迎来到我的网站！</h1>

	<script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js)：

// 设置跳转时间，单位为毫秒
var redirectTime = 5000;

// 设置跳转链接
var redirectUrl = "https://www.example.com";

// 倒计时函数
function countdown() {
    var countdownDisplay = document.getElementById("countdown");
    countdownDisplay.innerHTML = "页面将在" + (redirectTime / 1000) + "秒后跳转...";
    redirectTime -= 1000;

    if (redirectTime < 0) {
        clearInterval(timer);
        window.l