デジタル時計を作って見た
手を動かしながら考える経験積むために時計を作ってみた
CSSは度外視の現在の時刻表示をするもの
(今回、Qiita初投稿なのだけど、こういう書き方なんですな 慣れなきゃ)
写経元にしたURL
https://qiita.com/delph/items/9c702cdf03a5679d93e0
（@delphさん、丁寧な説明で分かりやすかったです。ありがとうございます）
コード
使う言語は以下二つ
clock-easy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--時刻表示 時：分：秒-->
<div id="clock-time"></div>
<!--日付表示 20xx/0x/0x-->
<div id="clock-date"></div>
<!--上記二つはjsから読み込む-->
<script type="text/javascript" src="clockEasy.js"></script>
</body>
</html>
clock-easy.js
//時間が更新されるように時計機能を函数「clock」とまとめる
function clock() {
//前準備 曜日を表す各文字列の配列
var weeks = new Array('sun','mon','tue','wed','thu','fry','sat')
// 数字が 1ケタのとき、「0」を加えて 2ケタにする
var twoDigital = function(num) { //変数twoDigitalを設定する 引数（材料）はnum
var digit //変数digitを定義 numに0を加えるためのもの
if (num < 10) {digit = "0"+ num; } //if文 "0"+は文字列として0を足すため
else {digit = num; }
return digit ; //返り値（結果）としてdigitを返す
}
// 現在日時を表すインスタンスを取得→メソッドを使って時間情報をそれぞれ取得する
var now =new Date(); //コンストラクタDate()により得た日時情報をインスタンス「new」に格納 newの中に現在の時間情報が全部入っている
var year = now.getFullYear();
var month = twoDigital(now.getMonth() +1 ); // 困る 月が２月なのに1月 → なので結果に1足す(10行目)
var day = twoDigital(now.getDate());
var week = weeks[now.getDay()]; // 困る weeksがなければ曜日が数字表記 → なので、配列Arrayを使用して数字を曜日に変換するインスタンス「week」を作成し、代入 （4,13行目）
var hour = twoDigital(now.getHours());
var minute = twoDigital(now.getMinutes());
var second = twoDigital(now.getSeconds());
// HTML: <div id="clock_date">(ココの日付文字列を書き換え)</div>
document.getElementById('clock-date').textContent
= year + '/' + month + '/' + day ;
// HTML: <div id="clock_time">(ココの時刻文字列を書き換え)</div>
document.getElementById('clock-time').textContent
= hour + '/' + minute + '/' + second;
}
// 上記のclock関数を1000ミリ秒ごと(毎秒)に実行
setInterval(clock, 1000);
わかった事
・VS Codeprogateで勉強したのみだったので、VS Code使って見たかった
ターミナルの使い方（mkdir,touch,cd,open）をつかめた
ブラウザでの検証
・HTML
雛形の作り方
jsファイルの取り込み方と連携の仕方
・js
使用した関数の動作
変数定義の順番
・詰まったところ
写経元様の記事にて作成ステップがあったので、その順番でjsは書き足していった。
まず、「時計機能作って、その後に、0で桁合わせしよう」と思って書いてたら、桁合わせしたいgetMonthとかの下にdigit変数の定義をしていて、エラーが出て悩んだ。
しょうもないミス。