時刻・タイマー処理: HTMLの入力を素材の準備
時刻やタイマーの処理は、JavaScriptでリアルタイムのインタラクションをウェブページに追加するのに便利な方法です。ここでは、時刻を表示するシンプルなデジタルクロックと、指定した時間後にアクションを実行するタイマーの例を紹介します。まず、必要なHTML構造を準備します。
HTMLの構造
以下は、デジタルクロックとタイマー機能を持つHTMLの基本的な構造です。これには、時刻を表示する部分と、ユーザーがタイマーを設定できる入力フィールド、タイマーを開始するボタンが含まれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>時刻とタイマーの操作</title>
</head>
<body>
<h1>リアルタイム時刻表示</h1>
<div id="clockDisplay"></div>
<h2>タイマー設定</h2>
<input type="number" id="timerSeconds" placeholder="秒数を入力">
<button onclick="startTimer()">タイマー開始</button>
<p id="timerOutput"></p>
<script src="timer.js"></script>
</body>
</html>このHTMLは次の要素から構成されます：
- 時刻表示用の
div: 現在の時刻を表示するための領域。 - タイマー設定用の
input: ユーザーがタイマーでカウントダウンする秒数を入力できるフィールド。 - タイマー開始用の
button: タイマーを開始するためのボタン。 - タイマー出力用の
p: タイマーが終了した時にメッセージを表示する領域。
このHTMLの準備が完了したら、JavaScriptを使用して時刻とタイマーの機能を実装します。このセットアップは、JavaScriptのタイマー関数やイベントハンドリングを理解するための基礎となります。次のステップでは、これらの機能を動的に作動させるJavaScriptコードの作成に進みます。