数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript 在 5 秒后重定向网页？
在本教程中，我们将学习如何使用 JavaScript 在 5 秒后重定向网页。要实现 5 秒后重定向网页，可以使用 setInterval() 方法设置时间间隔。将网页地址添加到 window.location.href 对象中。
众所周知，每当我们需要在特定时间延迟后调用函数或某些代码块时，我们都会使用 JavaScript 的 setTimeout() 和 setInterval() 方法。让我们看看如何使用这些方法在 5 秒后重定向网页。
要重定向页面，我们将使用 JavaScript 的 document.location.href 或 window.location.href 对象，如下所示：
document.location.href=""; OR window.location.href="";
让我们详细了解一下如何使用 setTimeout() 和 setInterval() 方法 以及 document.location.href 对象，以将网页重定向延迟 5 秒。
使用 setTimeout() 方法
我们将像往常一样使用 setTimeout() 方法，为其提供一个回调函数，并指定一个特定时间限制，在此时间限制之后，它将调用回调函数，该函数将重定向网页。
语法
以下语法将用于实现带有 document.location.href 对象的 setTimeout() 方法：
setTimeout(callBack_func, timeInterval);
function callBack_func() {
document.location.href = "";
}
让我们了解一下 setTimeout() 方法 的代码实现，以在 5 秒后重定向页面。
算法
步骤 1 - 在第一步中，我们将为 HTML 文档中与按钮标签关联的 onclick 事件定义一个回调函数。
步骤 2 - 在这一步中，我们将调用 setTimeout() 方法，其中包含一个回调函数和一个时间间隔，该时间间隔位于上一步中声明的函数内部。
步骤 3 - 在最后一步中，我们将定义 setTimeout() 方法的回调函数，该函数使用 document.location.href 对象在给定的时间间隔后重定向页面。
示例
下面的代码示例将解释如何使用 setTimeout() 方法将网页重定向延迟 5 秒：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to resirect a webpage after 5 seconds </h2>
<p id = "result"></p>
<button onclick = "redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
setTimeout(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds";
}
function myURL() {
document.location.href = 'https://tutorialspoint.com/index.htm';
}
</script>
</body>
</html>
上面的示例将在单击按钮后 5 秒钟将网页重定向到 tutorialspoint.com 的官方页面，这是因为在上面的代码中，setTimeout() 方法与 document.location.href 对象一起使用。
使用 setInterval() 方法
我们也可以使用 setInterval() 方法将网页重定向延迟特定时间间隔。但是，将 setInterval() 方法用于此目的时，我们需要小心，因为它会重复调用作为回调函数传入的函数。我们可以使用 clearInterval() 方法阻止它重复调用函数。
语法
以下语法将使您了解如何使用 setInterval() 方法以及 clearInterval() 方法以及 document.location.href 对象：
var interval_name = setInterval(call_back, time_interval);
function call_back() {
document.location.href = "";
clearInterval(interval_name);
}
让我们通过一个代码示例来实际了解一下如何使用 setInterval() 方法在 5 秒后重定向页面。
算法
上述示例和本示例的算法几乎相同，您只需要将上一个示例中的 setTimeout() 方法替换为 setInterval() 方法并将其存储到一个变量中，然后您必须在 setInterval() 的回调函数内使用 clearInterval() 方法以及传递给它的变量（其中存储了 setInterval() 方法）。
示例
以下示例将说明 setInterval() 方法的使用，以及您需要在上一个示例的算法中执行的更改：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to redirect a webpage after 5 seconds</h2>
<p id="result"></p>
<button onclick="redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
var interval = setInterval(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds setInterval() method.";
}
function myURL() {
document.location.href = 'https://tutorialspoint.com/index.htm';
clearInterval(interval);
}
</script>
</body>
</html>
在上面的示例中，我们在 redirect() 函数内使用了 setInterval() 方法，该方法将在用户单击按钮后触发，其中 setInterval() 将在 5 秒后调用其回调函数并将页面重定向到 document.location.href 对象中给定的 URL，然后它将清除间隔，以便它不会再次调用该函数并重复重定向到同一页面。
在本教程中，我们已经了解了如何使用 setTimeout() 和 setInterval() 方法以及 document.location.href 对象在 5 秒后重定向网页。我们已经通过实际实现代码示例来讨论这两种方法，以便更好地理解它们的工作原理。
39K+ 次浏览
