JavaScript リフレッシュ ページ タイマー
この記事では、JavaScript のページ更新タイマーについて説明します。 HTML ページに JavaScript をコーディングして、5 秒ごとにページを自動的に更新する方法を見ていきます。
JavaScript の助けを借りてブラウザーで Web ページを自動的に更新できるようになったため、Web ページを手動で更新するのは時間の浪費となるプロセスと労力のように思えます。 それでは、JavaScript を使用してそれを行う方法を理解しましょう。
JavaScript を使用して Web ページを自動的に更新する
JavaScript を使用して、Web ページを自動的に更新できます。 HTML ページで JavaScript を使用すると、特定の秒数後に Web ページを更新できます。
JavaScript の location.reload メソッドを使用して、Web ページを自動的に更新できます。 JavaScript でこのメソッドを使用すると、イベント時またはユーザーがリンクをクリックしたときに、コードを自動的に呼び出すことができます。
マウス クリックを使用して Web ページを更新する場合は、次のコードを使用します。
マウスクリックを使用するコード例:
<html>
<head>
<title>JavaScript refresh page</title>
</head>
<body>
<button>
<a href="javascript:location.reload(true)"> Click Refresh the Page</a></button>
</body>
</html>
出力：
出力からわかるように、Web ページを更新するための クリック ボタン オプションがあります。 ユーザーがクリックボタンをクリックすると、Web ページが更新されます。
JavaScript を使用して、マウスのクリックで Web ページを更新できます。
JavaScript を使用して 5 秒ごとに Web ページを自動的に更新する
JavaScript を使用して、一定時間後に Web ページを自動的に更新することもできます。 この場合、5 秒の時間を与えました。
location.reload メソッドと setTimeout() 関数の使用; 5 秒ごとに Web ページを更新できます。 setTimeout() は組み込みの JavaScript 関数で、一定時間後に別の関数を実行するために使用します。
この方法をよりよく理解するために、次のコード例を試してみましょう。 次のコードには、JavaScript を使用した HTML コードがあります。
JavaScript では、setTimeout 関数を使用してコード内の location.reload() を実行しました。 コードの本文セクションで 5 秒を指定しましたが、これは必要に応じて変更できます。
このコードを実行すると、Web ページは 5 秒ごとに自動的に更新されます。
5 秒ごとに Web ページを更新するサンプル コード:
<html>
<head>
<script type = "text/JavaScript">
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
</script>
</head>
<body onload = "JavaScript:AutoRefresh(5000);">
<p>Your Page will refresh every 5 seconds!</p>
</body>
</html>
コードの出力:
ご覧のとおり、コードの実行後に出力にこのメッセージが表示されます。 これは、Web ページが 5 秒ごとに自動的に更新されることを意味します。
これは、JavaScript を使用して Web ページを 5 秒ごとに自動的に更新する方法です。
この記事が、JavaScript を使用して Web ページを自動的に更新する方法を理解するのに役立つことを願っています。
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn