ベタにデジタル時計を表示してみました。以外と苦戦しました（^o^）
HTMLの記述
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>digital clock</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
<script src="links/action.js"></script>
</head>
<body>
<br>
<p>現 在 の 時 刻</p>
<div id="view_box">
<h1>   </h1>
<h1 id="clock"></h1>
</div>
</body>
</html>
<!-- index.html -->
JavaScriptの記述
/* action.js */
function showTime() {
const now = new Date();
/* nowには現在の日付を入れる */
const hours = now.getHours();
/* hoursには現在の時間を入れる */
const minutes = now.getMinutes();
/* minutesには現在の分数を入れる */
const seconds = now.getSeconds();
/* secondsには現在の秒数を入れる */
const timeString =
`${hours.toString().padStart(2, '0')}:
/*時を2桁表示、1桁の場合は0を付ける*/
${minutes.toString().padStart(2, '0')}:
/*分を2桁表示、1桁の場合は0を付ける*/
${seconds.toString().padStart(2, '0')}`;
/*秒を2桁表示、1桁の場合は0を付ける
「`」はバッククオート［Shift @］で、
シングルクオート［Shift 7］ではありません。
バッククオートで囲むと複数行の文字列を整理定義します。*/
document.getElementById('clock').textContent =
timeString;
}
/*getElementByIdは、HTMLで指定したIDに連動するドキュメント要素を取得するメソッド。*/
window.onload = function() {
showTime();
setInterval(showTime, 1000);
/* setInterval(showTime, 1000)だと
1秒後にshowTime関数を実行。
1000ミリ秒（1秒）を使うのは、もし0を使うと時計が行き過ぎて
-1まで進んでしまう可能性がでるからです。
時計が秒よりも小さい単位で動いている場合は、
終了条件式を1秒よりも小さい値にする必要があります。*/
};
/* action.js */
CSSの記述はいつもの通り
/* rule.css */
@charset "UTF-8";
html {
font-size: 16px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
background-color: gainsboro;
font-family: Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
div#view_box {
background-color: turquoise;
height: 100px;
width: 250px;
margin: 0px auto;
text-align: center;
vertical-align: middle;
border-radius: 10px;
}
p {
font-size: 20px;
text-align: center;
line-height:5px;
}
h1 {
font-size: 40px;
color: dimgray;
line-height:15px;
}
/* rule.css */
実行結果です。書体に凝るのもいいかも。
