前提
【日時と曜日を自動更新表示するデジタル時計】を作成したいと思っています。
解決法を探しましたが、どう直せばいいのかわからず詰まっています…
どなたか知恵をお貸しください、何卒よろしくお願いいたします。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- 日時と曜日を自動更新表示する
- 曜日を(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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/08/08 20:36