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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

772閲覧

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

solla

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2022/08/07 03:56

前提

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

実現したいこと

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

  • 日時と曜日を自動更新表示する
  • 曜日を(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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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()と同様の問題がある為、お勧めしません。

Re: solla さん

投稿2022/08/07 05:27

編集2022/08/07 08:20
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

solla

2022/08/08 20:36

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

0

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さん 遅くなりましたがありがとうございます 先頭を小文字にすることできちんと表示できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問