修正版　12時間時計の表示に変更に変更したいです。

前提・実現したいこと

このコードで時間表示を24時間時計ではなく、「1:20」であれば「午前1:20」、「12:30」であれば「午後0:30」というように12時間時計の表示に変更したいです。

よろしくお願いします。

該当のソースコード

javascript
1
2ソースコード
3
4
5  <!doctype html>
6<html>
7<head>
8<meta charset="UTF-8">
9<!-- 次のmetaタグの内容は「表示画面サイズの指定」
10    端末ごとのサイズに応じてフレキシブルな表示ができるように指定している。-->
11<meta name="viewport" content="width=device-width,initial-scale=1">
12<!-- 次のmetaタグの内容は「ユーザーエージェントの指定」
13    ユーザーエージエントとはユーザーが使用するブラウザのバージョンをサーバ側が判断してそれに合った文書を送ること。
14    “IE=edge”はIEでは常に最新のバージョンを指定している。
15    このmetaタグは必ずcssやjsなどの外部のファイルへのリンクが記述されている箇所より前に記述する。
16    外部のファイルの読み込みがあるとそこで表示モードが決定してしまうため。-->
17<meta http-equiv="x-ua-compatible" content="IE=edge">
18<title>Advanced Question</title>
19<link href="css/style.css" rel="stylesheet" type="text/css">
20</head>
21<body>
22<header>
23<div class="header-contents">
24<h1>タイトル</h1>
25<h2>サブタイトル</h2>
26</div><!-- /.header-contents -->
27</header>
28<div class="main-wrapper">
29<section>
30    <p>このファイル上の時間表示を24時間時計ではなく、「1:20」であれば「午前1:20」、「12:30」であれば「午後0:30」というように12時間時計の表示に変更しなさい。</p>
31    <hr>
32    <p>編集したindex4.htmlについて、ブラウザで動作確認を行う。</p>
33    <hr>
34
35    <p id = "clock"></p>
36</section>
37</div><!-- /.main-wrapper -->
38<footer>JavaScript Samples</footer>
39<!-- この部分(bodyの終了タグ直前)にJavaScriptを書く -->
40    <script>
41
42
43        var addZero = function(num, digit) {
44            var numString = String(num);
45            while (numString.length < digit) {
46                numString = '0' + numString;
47            }
48            return numString;
49          }
50
51
52         document.getElementById('clock').textContent = '現在の時刻は' + String(hour) + ':' + addZero(minute, 2) + 'です。';
53    </script>
54</body>
55</html>

m.ts10806

2019/07/24 02:09

コードブロックは```で「囲う」必要があります。 ```javascript //ここにコード ``` また、実際のコード以外は含まないようにしてください。（ファイル名になども外に出してもらったほうが良いです）

maisumakun

2019/07/24 02:10

hourやminuteの定義がないような気がしますが、コードはこれで全部ですか？

gentaro

2019/07/24 02:15

「javascript 時間」とか「javascript 時計」あたりでググってみたんでしょうか？

m.ts10806

2019/07/24 02:16 編集

「javascript 12時間表記」で解説記事も過去質問も出てくるのでそちら見たほうが。

m.ts10806

2019/07/24 02:34

コード追加は良いのですが、コードブロック対応を・・・。修正されたことは修正履歴があることで分かるので「修正版」等をタイトルに入れる必要はないと思います。

mather

2019/07/24 07:31

編集履歴を見たら「課題」って書かれていた部分を意図的に消してますね…。課題の丸投げは何の意味もありません。自分で課題を解いて単位をもらうようにしましょう。

行動規範の内容に同意します

回答2件

JavaScript
1new Date().toLocaleString('ja-JP', { hour: 'numeric', minute: 'numeric', hour12: true });

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

投稿2019/07/24 09:11

x_x

総合スコア13749

時間が１１以下なら、前に午前を付ける
１２以上なら、時間から１２を引いて、前に午後をつける、ってところでしょうね

投稿2019/07/24 02:11

編集2019/07/24 02:12

y_waiwai

総合スコア87749

y_waiwai

2019/07/24 02:14

わーい、またバグで修正できん。。２行目は以下１２以上なら、時間から１２を引いて、前に午後をつける、ってところでしょうね

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！