時刻・タイマー処理: JavaScriptによるHTMLの変更
JavaScriptを使ってHTMLコンテンツをリアルタイムで更新する方法は、
多くのインタラクティブなウェブアプリケーションにおいて重要な役割を果たします。
この記事では、具体的に時刻表示とタイマー機能の実装を通じて、
JavaScriptがどのようにHTMLを動的に変更するかを解説します。
JavaScriptによるリアルタイム時刻表示
リアルタイムの時刻を表示するためには、JavaScriptの Date
オブジェクトと
setInterval
メソッドを使います。
以下のステップに従って時刻を表示するサンプルコードを実装します。
HTMLの準備
HTMLの基本的な構造は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイム時刻表示</title>
</head>
<body>
<div id="clockDisplay">時刻がここに表示されます</div>
<script src="clock.js"></script>
</body>
</html>
JavaScriptの実装
clock.js
に以下のJavaScriptコードを記述します。
function showTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('clockDisplay').textContent = timeString;
}
setInterval(showTime, 1000);
このコードでは、showTime
関数が現在時刻を取得し、
その時刻を clockDisplay
の div
要素に表示します。setInterval
はこの関数を1秒ごとに繰り返し呼び出し、時刻を更新します。
JavaScriptによるタイマー機能の実装
次に、ユーザーが設定した秒数後に何かアクションを実行するタイマー機能を作成します。
HTMLの追加
先のHTMLにタイマー機能を追加します。
<input type="number" id="timerSeconds" placeholder="秒数を入力">
<button onclick="startTimer()">タイマー開始</button>
<p id="timerOutput"></p>
JavaScriptの追加
clock.js
にタイマー機能を追加します。
function startTimer() {
const seconds = document.getElementById('timerSeconds').value;
const timerOutput = document.getElementById('timerOutput');
timerOutput.textContent = "タイマーが開始されました。";
setTimeout(() => {
timerOutput.textContent = "タイマーが終了しました!";
}, seconds * 1000);
}
このコードでは、ユーザーが入力した秒数後にメッセージを更新します。setTimeout
は指定された時間が経過した後に一度だけ関数を実行します。
まとめ
この記事では、JavaScriptを使用してHTMLページ上でリアルタイムに時刻を表示したり、
独自のタイマーを実装する方法を学びました。
これらの技術は、ウェブ開発において非常に有用で、
多様なシナリオで活用することができます。
動的なウェブアプリケーションを作成するための基礎として、
これらの基本的な機能を理解し活用することが重要です。
CSSとJavaScriptで実現するパララックス効果【モバイル対応】
10月 27, 2024JavaScriptとCSSで作る!マウスオーバーでひっくり返る3Dボタンの実装方法
10月 10, 2024JavaScriptで特定の時間帯に応じて文字を変更する方法
10月 9, 2024