Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@delph

JavaScript で簡単に時計を作ってみた

Last updated at Posted at 2017-07-02

　最初のアプリとして、簡単にですが時間と日時を表示させた時計のようなアプリを作ってみました。備忘録もかねて投稿いたします。

:warning: ただし、時計の骨格部分のみでスタイリングはありません。ご了承ください

#サンプルプログラム

自分が作った時計のサンプルプログラムです

clock.html
 <!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
　　<title>時計</title> 
  </head>

<body>

   <!-- 時刻部分 -->
   <div id="clock_time"></div>
   <!-- 日付部分 -->
   <div id="clock_date"></div>
        
  <script type="text/javascript" src="clock.js"></script>
 
</body>

</html>
clock.js

 function clock()
{
  // 数字が 1ケタのとき、「0」を加えて 2ケタにする
  var twoDigit =function(num){
    　     var digit
         if( num < 10 )
          { digit = "0" + num; }
         else { digit = num; }
         return digit;
   }
  // 曜日を表す各文字列の配列
  var weeks = new Array("Sun","Mon","Thu","Wed","Thr","Fri","Sat");
    
 // 現在日時を表すインスタンスを取得
  var now = new Date();
   
    var year = now.getFullYear();
    var month = twoDigit(now.getMonth() + 1)
    var day = twoDigit(now.getDate());
    var week = weeks[now.getDay()];
    var hour = twoDigit(now.getHours());
    var minute = twoDigit(now.getMinutes());
    var second = twoDigit(now.getSeconds());
 //　HTML: <div id="clock_date">(ココの日付文字列を書き換え)</div>
document.getElementById("clock_date").textContent =  year + "/" + month + "/" + day + " (" + week + ")";
    
//　HTML: <div id="clock_time">(ココの時刻文字列を書き換え)</div>
document.getElementById("clock_time").textContent = hour + ":" + minute + ":" + second;
   
}
// 上記のclock関数を1000ミリ秒ごと(毎秒)に実行
setInterval(clock, 1000);

#時計はどう作るのか？

流れは以下のステップになります

#####1. HTMLで時刻部分・日付部分を作る
#####2. Dateオブジェクトを使って現在日時を取得する（JavaScript）
#####3. 日時を正しく表記させ、整える（JavaScript）
#####4. 1 秒ごとに繰り返し処理をさせる（JavaScript）
#####5. HTML に時刻・日付を表示させる（JavaScript）

#作り方のプロセス

###1. HTMLで時刻部分・日付部分をつくる

まずはHTMLで時刻・日付を表示させる骨格を作ります

clock.html
 ...略 
 <!-- 時刻部分 -->
  <div id="clock_time"></div>
  <!-- 日付部分 -->
  <div id="clock_date"></div>
     
   
    <script type="text/javascript" src="clock.js"></script>
 
 </body>
 </html>

###2. Dateオブジェクトを使って現在日時を取得する

次に JavaScript で日時を取得します。ここでは、Date オブジェクトを使い、現在日時を表すインスタンスを作ります。そして、メソッドを使って日時をそれぞれ取得し、変数に代入します。

clock.js
    
 // 現在日時を表すインスタンスを取得
  var now = new Date();
 
 // メソッドを使って日時をそれぞれ取得し、変数に代入する
 
    var year = now.getFullYear();  　// 現在の年を year 変数に代入
    var month = now.getMonth()  　　 // 現在の月を month 変数に代入
    var day = now.getDate();        // 現在の日を day 変数に代入
  　var week = now.getDay();　　　　 // 現在の曜日を week 変数に代入
    var hour = now.getHours();      // 現在の時を hour 変数に代入
    var minute = now.getMinutes();  // 現在の分を minute 変数に代入
    var second = now.getSeconds();　// 現在の秒を second 変数に代入

###3. 日時を正しく表記させ、整える

これで取得できたのですが、いくつか問題点があります

####3-1　日時を正しく表記させるには？

getMonth メソッドは現在の月を取得しますが、その値は現在の月から1を引いたものになります（1月：0、2月:1 …、12月:11）ので、1をプラスする必要があります。

また、getDay メソッドは現在の曜日を「数値」で返す（日曜日：0、月曜日：1…、土曜日：6）のでこのままでは使いづらいです。

そこで、この数値を利用してそれに対応する曜日を配列を使って表示させるようにしてみましょう！

clock.js

// 曜日を表す各文字列の配列
var weeks = new Array("Sun","Mon","Thu","Wed","Thu","Fri","Sat"); 

// weeks[0] -> Sun 
// weeks[now.getDay()] -> 現在の曜日


//変更前
var month = now.getMonth()  　　 // 現在の月を month 変数に代入
var week = now.getDay();　　　　 // 現在の曜日を week 変数に代入


//変更後

var weeks = new Array("Sun","Mon","Thu","Wed","Thu","Fri","Sat"); 

var month = now.getMonth()+1;    // 正しい月を表示
var week = weeks[now.getDay()];  // 対応する曜日を表示

これで、正しい月が表示できるようになり、曜日も文字表記で正しく表示できるようになります。

####3-2 「0~」を実装してみよう！

デジタル時計で「00」や「03」のように、2 ケタ目に「0」が付いているのをよく見かけると思いますのでそれも実装してみましょう！

しかし、このままでは1 ケタの時に「0~」のような 2 ケタの表示になりませんので、数字が一桁のとき「0」を加えて 2 ケタにするプログラムを追加します。

clock.js
// 数字が 1ケタのとき、「0」を加えて 2ケタにする
var twoDigit =function(num){
    　   var digit
         　if( num < 10 )
          　　{ digit = "0" + num; } //「文字列」として 0 を加える
         　else 
　　　　　　　 { digit = num; }
          return digit;
    　 }

//テスト用

 console.log(twoDigit(3));　　//出力結果：03
 console.log(twoDigit(12));　 //出力結果：12

これで、「0~」表示の準備が出来ました。 それでは実装してみましょう！

clock.js
   
  var twoDigit= function(num){
     //数字が 1ケタのとき、「0」を加えて 2ケタにする
     }

 // 例：twoDigit(3) ->03
　  var month = twoDigit(now.getMonth());     // 常時 2ケタ表記の月 
    var day = twoDigit(now.getDate());        // 常時 2ケタ表記の日
    var hour = twoDigit(now.getHours());      // 常時 2ケタ表記の時
    var minute = twoDigit(now.getMinutes());  // 常時 2ケタ表記の分
    var second = twoDigit(now.getSeconds());　// 常時 2ケタ表記の秒

:pencil2: 注意点

{ digit = "0" + num; }

を

{ digit = 0 + num; }

のように、ダブルクオーテーションを忘れると、数値同士の計算になるので「0~」の表示にはなりません。気を付けましょう。

####4. 1 秒ごとに繰り返し処理をさせる（JavaScript）

ここまで来れば、完成はもうすぐです。あとはこのプログラムを１秒ごとに繰り返し処理をさせるようにすれば、時計が出来上がります。

これを実装するには　setInterval メソッド　を使います。

これは、指定した関数を一定間隔で繰り返し実行させることができるメソッドです。

setInterval(関数,時間 ms） のように書きます。

ここで注意したいのが setInterval メソッドの対象が**「関数」**であるということです。では、この関数の対象をどこに当てればいいのでしょうか？

setInterval メソッドをかけたいのは今まで作った時計のプログラムなので、これを全部くくって新たに関数にしちゃいます！

clock.js
   function clock　{　
  
　　　
     //関数：数字が 1ケタのとき、「0」を加えて 2ケタにする
     

　　　// 現在日時を表すインスタンス
 　　 // メソッドを使って日時をそれぞれ取得し、変数に代入
      // 常時 2 ケタの日時表記
      // 配列による曜日の表記

　 }

   //clock 関数を 1000ミリ秒（1秒）ごとに実行
   setInterval(clock,1000);

※ 分かりやすくするため、今まで作った時計のプログラムは省略しています

これで時計のように表示させる準備が出来ました。あとはこれを HTML に表示するようにすれば完成です！

####5. HTML に時刻・日付を表示させる（JavaScript）

JavaScriptで書いたプログラムを HTML に表示させるには

5-1. 書き換えたい部分の要素を取得する
5-2. 取得した要素を書き換える　

といった手順で表示させます。

5-1. 書き換えたい部分の要素を取得する

Javascript で document.getElementById(id名) を使います。
ここで今一度 HTML を見てみましょう。

clock.html
 ...略 
 <!-- 時刻部分 -->
  <div id="clock_time"></div>
  <!-- 日付部分 -->
  <div id="clock_date"></div>
     
   
    <script type="text/javascript" src="clock.js"></script>
 
 </body>
 </html>

HTML に表示させたいのは時刻部分と日付部分ですので、div タグの id 要素にある　clock_time と clock_date を取得すればいいということになります。

従って、

document.getElementById("clock_time")
document.getElementById("clock_date")

で、表示させたい要素をJavaScriptで取得することができます。

5-2 取得した要素を書き換える

テキストの書き換えるには document.getElementById() のあとに textContentもしくは innerHTML を続けます。

textContent :　書き換える文字列がテキストのみの場合に使用
innerHTML : 書き換える文字列にHTMLタグを含めることができる

そして書き換えるテキストを代入します。

これらを踏まえてプログラムを書くと、

clock.js
//「　時:分:秒　年/月/日（曜日）」表記
    
//　HTML: <div id="clock_time">(ココの時刻文字列を書き換え)</div>
document.getElementById("clock_time").textContent 
= hour + ":" + minute + ":" + second;
  
//　HTML: <div id="clock_date">(ココの日付文字列を書き換え)</div>
document.getElementById("clock_date").textContent 
=  year + "/" + month + "/" + day + " (" + week + ")";

このようになるかと思います。

特にタグを含めるということはしないので、textContent innerHTMLどちらでもいいかと思います。

これも、時計のプログラム全体に処理するものなので　clock　関数の中に入れるのをお忘れなく！

※「年/月/日（曜日）時:分:秒」表記にしたいときは、下のように日付部分のコンテンツを上に持っていきましょう！

clock.html
 ...略 
 
  <!-- 日付部分 -->
  <div id="clock_date"></div>
  <!-- 時刻部分 -->
  <div id="clock_time"></div>    
   
    <script type="text/javascript" src="clock.js"></script>
 
 </body>
 </html>

#:star: 最後に
　
　最初のアプリとして、簡単な時計を作ることが出来ました。大変ではありましたが、出来上がった時の達成感はひとしおです！色々と勉強にもなり、経験値もグンと上がったような気がします。

　まだ分からないことがたくさんありますが、一日でも早く上達できるように頑張りたいと思います。

16
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?