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

我们可以通过使用带有 “http-equiv “属性的 “meta “标签，或通过使用setInterval()浏览器API来自动刷新网页。自动刷新网站有一定的用处，例如，在创建一个寻找天气的网络应用程序时，我们可能想在设定的时间间隔后刷新我们的网站，向用户展示某个地点的近乎精确的天气数据。

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

方法1

在这种方法中，我们将使用 “元 “标签的 “http-equiv “属性，在一个特定的时间间隔后刷新我们的网络应用，这个时间间隔在其 “内容 “属性中传递。在HTML5规范中，该元标签是默认提供给我们的。

语法

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

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

例子

在这个例子中，我们将使用 “元 “标签的 “http-equiv “属性，每隔2秒刷新一次我们的网络应用。

<!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>

方法二

在这种方法中，我们将使用浏览器提供的 “setInterval() “API，它允许我们在每过一定的时间后运行一段代码，这两个参数都作为参数传递给浏览器API。

语法

setInterval(callback_fn, time_in_ms)

“setInterval() “需要2个参数，第一个是延迟后触发的回调函数，第二个是以毫秒为单位的延迟。

例子

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

<!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>