日時と曜日を自動更新表示したい(javascript)

前提

【日時と曜日を自動更新表示するデジタル時計】を作成したいと思っています。
解決法を探しましたが、どう直せばいいのかわからず詰まっています…
どなたか知恵をお貸しください、何卒よろしくお願いいたします。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

日時と曜日を自動更新表示する
曜日を(Sun.)など英語省略表示する
時間の桁数が1桁の際、先頭に0を加えて2桁に調整する
[時間]と[日にち・曜日]を上下に並べて表示したい

発生している問題・エラーメッセージ

時間だけはリアルタイム更新表示できるのですが
日にちと曜日部分が表示できませんでした。

該当のソースコード

javascript
1	<script>	
2		
3		function figure2(num) {
4		// 桁数が1桁だったら先頭に0を加えて2桁に調整する
5		var ret;
6		if( num < 10 ) { ret = "0" + num; }
7		else { ret = num; }
8		return ret;
9		}
10		
11		function DisplayTime() {			
12		var now = new Date();
13		var Hour = figure2( now.getHours() );
14		var Min  = figure2( now.getMinutes() );	
15			
16		var TextTime = Hour + ":" + Min ;	
17		document.getElementById("Time").innerHTML = TextTime;
18		}
19		
20		function DisplayDate() {
21		var now = new Date();
22		var weeks = new Array('Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.');	
23		var Month = now.getMonth()+1;
24		var Date = now.getDate();
25		var Day = weeks[ now.getDay() ]; 
26			
27		var TextDate = document.getElementById("Date");	
28		TextDate.innerHTML = Month + "/" + Date +"(" + Day + ")";
29		}		
30		
31		setInterval('DisplayTime()',1000);
32		setInterval('DisplayDate()',1000);
33		
34	</script>

html
1<body>
2	<div class="date-time">
3		<div class="inner">
4			<div id="Time"></div>
5			<div id="Date"></div>
6		</div>
7	</div>
8</body>

css
1  <style>
2		
3		*{
4			margin: 0;
5			padding: 0;
6		}		
7		
8		
9        body{ 
10			font-size: 22pt;		/* 文字サイズ指定 */
11			font-family: 'Roboto', sans-serif;
12			color: #000;			/* 文字色指定 */		
13		}
14		
15		.date-time{		
16			position: absolute;
17			top: 0;
18			left: 50%;
19			transform: translate(-50%, 0);
20			padding : 20px;
21		}
22		
23		.inner {
24			text-align: right;
25			display: block;
26		}
27		
28    </style>

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

回答2件

ベストアンサー

Intl.DateTimeFormat()

Intl.DateTimeFormat() を使うと、日時表示形式の管理を簡略化できます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>sample</title>
6  <style>
7    * {
8      margin: 0;
9      padding: 0;
10    }
11
12    body {
13      font-size: 22pt;
14      /* 文字サイズ指定 */
15      font-family: 'Roboto', sans-serif;
16      color: #000;
17      /* 文字色指定 */
18    }
19
20    .date-time {
21      position: absolute;
22      top: 0;
23      left: 50%;
24      transform: translate(-50%, 0);
25      padding: 20px;
26    }
27
28    .inner {
29      text-align: right;
30      display: block;
31    }
32  </style>
33</head>
34
35<body>
36  <div class="date-time">
37    <div class="inner">
38      <div id="Time"></div>
39      <div id="Date"></div>
40    </div>
41  </div>
42
43  <ul>
44    <li><a href="https://teratail.com/questions/a9vii937yjird8">日時と曜日を自動更新表示したい(javascript)</a></li>
45  </ul>
46
47  <script>
48    'use strict';
49
50    function getMMDDAAA(date) {
51      return Intl.DateTimeFormat('ja-JP', {
52          hour12: false,
53          month: 'numeric',
54          day: 'numeric'
55        }).format(date) + '(' +
56        Intl.DateTimeFormat('en-US', {
57          weekday: 'short'
58        }).format(date) + '.)';
59    }
60
61    function getHHMM(date) {
62      return Intl.DateTimeFormat('ja-JP', {
63        hour12: false,
64        hour: '2-digit',
65        minute: '2-digit'
66      }).format(date);
67    }
68
69    setInterval((div) => div.textContent = getMMDDAAA(new Date), 1000, document.getElementById('Date'));
70    setInterval((div) => div.textContent = getHHMM(new Date), 1000, document.getElementById('Time'));
71
72    console.log(getMMDDAAA(new Date(2022, 0, 1, 1, 1))); // 1/1(Sat.)
73    console.log(getHHMM(new Date(2022, 0, 1, 1, 1))); // 01:01
74  </script>
75</body>
76</html>

setInterval()

javascript
1setInterval('DisplayTime()',1000);
2setInterval('DisplayDate()',1000);

setInterval()の第一引数に文字列を渡すことは、eval()と同様の問題がある為、お勧めしません。

setTimeout() - Web API | MDN

Re: solla さん

投稿2022/08/07 05:27

編集2022/08/07 08:20

think49

総合スコア18119

回答へのコメント

solla

2022/08/08 20:36

think49さん遅くなりましたがありがとうございます時計表示に関する記事を探すと setInterval()を使用した内容ばかりでしたので勉強になりましたmm

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

DisplayDate 関数の中で、変数 Date を先頭小文字のdateにするとどうでしょう？

diff
1- var Date = now.getDate();
2+ var date = now.getDate();

追記

上記の修正にあわせて、変数 Date を使っている行も修正します。

diff
1- TextDate.innerHTML = Month + "/" + Date +"(" + Day + ")";
2+ TextDate.innerHTML = Month + "/" + date +"(" + Day + ")";

投稿2022/08/07 04:28

編集2022/08/07 05:28

退会済みユーザー

総合スコア0

回答へのコメント

solla

2022/08/08 20:38

su507さん遅くなりましたがありがとうございます先頭を小文字にすることできちんと表示できました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.69%

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

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

質問する

同じタグがついた質問を見る

トップ JavaScriptに関する質問

日時と曜日を自動更新表示したい(javascript)

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

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