JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

Webアプリケーションを開発していると、24時間表記の時刻を「午前・午後」が付いた12時間表記に変換して表示したい場面があります。この記事では、JavaScriptとHTMLを組み合わせて、ユーザーが入力した時刻を12時間表記に変換し、その結果を画面に表示するシンプルなプログラムを紹介します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>24時間表記を12時間表記に変換</title>
<style>
    body {
        font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>24時間表記を12時間表記に変換する</h1>
<label>時 </label><input class="hour" type="number"><br/>
<label>分 </label><input class="minute" type="number"><br/>
<div class="result"></div><br />
<button class="Btn">変換する</button>
<h3>上のボタンをクリックすると、入力した24時間表記の時刻が12時間表記に変換されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let hrEle, minEle;
    BtnEle.addEventListener("click", () => {
        hrEle = Number(document.querySelector('.hour').value);
        minEle = document.querySelector('.minute').value;
        if (hrEle >= 0 && hrEle <= 23 && minEle >= 0 && minEle <= 59) {
            let AMorPM = '午前';
            if (hrEle >= 12) AMorPM = '午後';
            hrEle = hrEle % 12;
            if (hrEle === 0) hrEle = 12;
            resEle.innerHTML = '時刻 = ' + hrEle + ' : ' + minEle + ' ' + AMorPM;
        } else {
            resEle.innerHTML = '0〜23時・0〜59分の範囲で入力してください';
        }
    });
</script>
</body>
</html>

コードの解説

このプログラムの動作のポイントは以下の通りです。

  • 入力値の取得:「時」と「分」の入力欄から値を取得します。文字列のまま比較すると意図しない結果になることがあるため、Number()で数値に変換してから判定しています。
  • 入力値のチェック:時が0〜23、分が0〜59の範囲内かどうかを確認し、範囲外の値が入力された場合はエラーメッセージを表示します。
  • 午前・午後の判定:時間が12以上であれば「午後」、12未満であれば「午前」とします。
  • 12時間表記への変換:剰余演算子(%)を使って「時間 % 12」を計算します。さらに、結果が0になった場合(12時や0時など)は12に置き換えることで、「0時」ではなく「12時」として正しく表示されます。

出力結果

24時間表記で有効な時刻を入力し、「変換する」ボタンをクリックします。

JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

例えば「15時30分」を入力してボタンを押すと、「時刻 = 3 : 30 午後」という結果が表示されます。

JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

  1. 【JavaScript】MySQLのDATETIME値をJSON形式に変換する方法を解説

    MySQL DATETIME値をJSON形式に変換する基本手法MySQLのDATETIME値をJavaScriptでJSON形式に変換するには、JSON.stringify()メソッドを使用します。手順としては、まずDateオブジェクトとして日時を取得し、年・月・日・時・分・秒をそれぞれ取り出してオブジェクトにまとめ、最後にJSON文字列へ変換します。サンプルコード以下は、MySQLのDATETIME値をJSON形式に変換するJavaScriptのコード例です。<script>var mySQLDateTime = new Date(Fri Sep 06 2019 22:54:48

  2. JavaScriptで文字列を真偽値（Boolean）に変換する方法

    JavaScriptでは、文字列が「true」というリテラルと一致するかどうかを比較演算子で判定することで、文字列を実質的に真偽値（Boolean）として扱うことができます。ここでは、==（緩い等価比較）と===（厳密等価比較）の2つの方法を使った具体例を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: &