JavaScriptを使ってHTMLに現在時刻をリアルタイムで表示する方法を徹底解説
「HTMLタグで現在時刻を表示させたい」
「Webサイトの上部に現在時刻をリアルタイムで表示できる仕様にしたい」
上記のように考えていてこの記事にたどり着いた方も多いのではないでしょうか？
JavaScriptを活用することで、HTMLに現在時刻を表示できます。また、input属性にtimeタイプを利用することで、時刻の入力欄も作成可能です。
今回、WEBCAMP MEDIAは、JavaScriptを使ってHTMLに現在時刻をリアルタイムで表示する方法について解説していきます。
- 現在時刻の表示方法
- 日付の表示方法
- 曜日の表示方法
- 時刻入力欄の作り方
以上の項目に沿って説明します。
この記事を読むことで、JavaScriptで時刻のデータを取得する方法からHTMLに現在時刻を表示する方法が理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLに現在時刻を表示する方法
HTMLに現在時刻を表示するには、JavaScriptから現在時刻のデータを取得する必要があります。
JavaScriptから現在時刻を取得してHTMLに表示する方法を、サンプルコードを用いて解説します。
サンプルコード
<body>
<span id="text"></span>
<script type="text/javascript">
document.getElementById("text").innerHTML = showTime();
function showTime() {
var now = new Date();
var nowhour = now.getHours();
var nowminutes = now.getMinutes();
var nowseconds = now.getSeconds();
var text = nowhour + "：" + nowminutes + "：" + nowseconds;
return text;
}
</script>
</body>JavaScriptにshowTimeという関数を作り、現在時刻を表示する処理を入力していきます。
まず、new演算子を使い、現在時刻の情報が格納されているDateクラスをインスタンス化してnow変数に代入します。
var now = new Date();now変数から、現在の時間と分数、秒数を取得して角変数へ代入します。
var nowhour = now.getHours();
var nowminutes = now.getMinutes();
var nowseconds = now.getSeconds();各変数をコロン「:」で区切って時間から秒数まで表示順に並べ、text変数へ代入します。最後に、returnを使ってtext変数を処理結果として返します。
innerHTMLを利用して、spanタグに指定されたidに現在時刻を表示して完了です。
ボタンを押すとHTMLに現在時刻を表示する方法
HTMLでボタンを作成してonclick属性を指定することで、ボタンを押すと現在時刻が表示される仕様に変更できます。
onclick属性とは、指定したHTML要素がクリックされたときにJavaScriptの関数を実行できる属性です。
サンプルコード
<body>
<a href="#" onclick="showTime()">現在時刻を表示する</a>
<span id="text"></span>
<script type="text/javascript">
function showTime() {
var now = new Date();
var nowhour = now.getHours();
var nowminutes = now.getMinutes();
var nowseconds = now.getSeconds();
var text = nowhour + "：" + nowminutes + "：" + nowseconds;
document.getElementById("text").innerHTML = text;
}
</script>
</body>aタグを使ってボタンを作り、onclick属性に現在時刻を表示する関数を設置することで、クリックするとJavaScriptが実行されます。
HTMLに日付を表示する方法
HTMLに日付を表示するには、現在時刻を表示した時と同じくJavaScriptのDateクラスをインスタンス化して、現在の日時情報を取得していきます。
現在の日付は、Dateクラスに格納されているgetDate関数を利用します。
サンプルコード
<body>
<p>今日の日付は<span id="text"></span>日です</p>
<script type="text/javascript">
document.getElementById("text").innerHTML = showDay();
function showDay() {
var now = new Date();
var day = now.getDate();
return day;
}
</script>
</body>取得した日付をday変数に代入し、returnを使って関数の結果として返します。
最後に、日付を表示するHTML要素をgetElementByIdで取得し、innerHTMLを使って出力して完了です。
HTMLに曜日を表示する方法
HTMLに曜日を表示するには、Dateクラスをインスタンス化してgetDay関数を利用します。
getDay関数は現在の曜日を0から6までの数字で表示するので、各数字と曜日を紐づける作業が必要です。
サンプルコード
<body>
<p>今日は<span id="text"></span>です</p>
<script type="text/javascript">
document.getElementById("text").innerHTML = showDay();
function showDay() {
var weeks = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];
var now = new Date();
var weekdays = now.getDay();
return weeks[weekdays];
}
</script>
</body>week変数を作成し、日曜日から土曜日までの曜日を配列に格納します。配列にはインデックス番号が付与されているので、その特徴を利用します。
getDay関数をweekdays変数に代入し、weeks変数に入力されている配列にweekdays変数を使って現在曜日の数字を入力することで曜日が表示されます。
たとえば、今日が火曜日の場合は、weekdays変数に2という数字が代入されます。
この数字を曜日が格納されたweeks変数に設置すると、インデックス番号2である火曜日という配列が取り出されて表示されるのです。
inputタグを使ってHTMLに時間入力欄を作る方法
HTMLに現在時刻の入力欄を作るには、inputタグにtype=”time”を指定します。またvalueタグを利用すると、時刻に初期値を指定できます。
サンプルコード
<body>
<form method="post">
<div>
<label for="timename">時刻入力欄</label>
<input type="time" name="timename" value="00:00">
</div>
</form>
</body>また、max属性とmin属性を使うことで、表示できる時刻の範囲を制限できます。
たとえば、午前8:30から午後17:30までに制限したい場合は、min属性に8:30と入力し、max属性に17:30と入力します。
<label for="timename">時刻入力欄</label>
<input type="time" name="timename" value="08:30" min="08:30" max="17:30">時刻入力を必須にしたい場合は、入力されていないとエラー表示できるrequired属性を配置するとよいでしょう。
<label for="timename">時刻入力欄</label>
<input type="time" name="timename" value="08:30" required>時刻を設定できる入力フォームを作ることで、Webサイトからお店を予約するときなどに活用できます。
まとめ
今回、WEBCAMP MEDIAでは、JavaScriptを使ってHTMLに現在時刻をリアルタイムで表示する方法について解説しましたが、いかがでしたでしょうか？
JavaScriptのDateクラスをインスタンス化することで、現在時刻を取得してHTMLに表示できます。
また、inputタグを使ってtimeタイプを設置することで、時刻の入力欄も作成できます。
現在時刻だけでなく日付や曜日も取得できるので、WebサイトやWebサービスに現在日時を表示したいときにぜひ役立ててみてください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
