CSS 如何在固定时间内自动刷新网页

我们可以通过使用具有“http-equiv”属性的“meta”标签或使用setInterval()浏览器API来自动刷新网页。自动刷新的网站有其特定的用例，例如，在创建一个天气查找的web应用程序时，我们可能希望在一定时间间隔后刷新我们的网站，以向用户显示该位置的准确天气数据。

让我们来看下面的两种方法，了解如何设置自动刷新的网站。

方法1

在这种方法中，我们将使用“meta”标签的“http-equiv”属性，在其“content”属性中传递一个特定的时间间隔来刷新我们的Web应用程序。meta标签在HTML5规范中为我们提供了默认值。

语法

<meta http-equiv="refresh" content="n">

在这里，“n”是一个正整数，表示刷新页面后的秒数。

示例

在这个示例中，我们将使用“meta”标签的“http-equiv”属性，在每2秒后刷新我们的Web应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
   <meta http-equiv="refresh" content="2">
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
</body>
</html>

方法2

在这种方法中，我们将使用浏览器提供给我们的“setInterval（）”API，该API允许我们在每隔一定时间之后运行一定的代码，这两个参数都会传递给浏览器API。

语法

setInterval(callback_fn, time_in_ms)

“setInterval()”接受两个参数，第一个是延迟结束后触发的回调函数，第二个是以毫秒为单位提供的延迟时间。

示例

在这个示例中，我们将使用“setInterval()”浏览器API来在每2秒后刷新我们的Web应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
   <script>
      window.onload = () => {
         console.clear()
         console.log('page loaded!');
         setInterval(() => {
            window.location = window.location.href;
         }, 2000)
      }
   </script>
</body>
</html>