JavaScript 超シンプルなデジタル時計プログラムの作り方

スポンサーリンク
読了時間: 約41

JavaScript 超シンプルなデジタル時計

今日は、何となくプログラミングをしたい気分になりましたので…。
JavaScriptのプログラムを組んでみました。

今回、作成してみたプログラムというのは「超シンプルなデジタル時計」です。
「現在の日付と時刻を表示する」という、非常に簡単な作りとなっています。

JavaScriptに関しては、それほど詳しいわけではありませんので…。
あまり高度なプログラムは組めないのですよね。
そこで、今回のような簡単なものから作ってみようと思い立ちました。
JavaScriptを勉強し始めた頃を思い出しながら作成しましたので、なんだか懐かしい気持ちになりました。

今回の記事では、超シンプルなデジタル時計プログラムの作り方について解説します。
特に難しいことは何もしていませんので…。
JavaScriptプログラミング初心者の方でもすぐに理解できると思いますよ。

スポンサーリンク

超シンプルなデジタル時計プログラムを作成するのに必要な知識

JavaScriptで、現在の日付と時刻を取得する方法

JavaScriptを使って、現在の日付と時刻を取得するにはDateを使います。
使い方としては、まず「new Date()」として、Dateインスタンスを取得します。

var now = new Date();

日付を取得するには、「getFullYear()」「getMonth()」「getDate()」を使います。
それぞれ、年・月・日を取得します。
ただし、getMonth()は0から始まりますので、実際の月に合わせるために1を足す必要があります。

var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();

時刻を取得するには、「getHours()」「getMinutes()」「getSeconds()」を使います。

var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

JavaScriptで、毎秒更新する処理の書き方

JavaScriptで、一定時間ごとにある関数の処理を行いたい場合には「setInterval()」を使います。
最初の引数には関数名、次の引数には関数の処理を呼び出す間隔(ms)を指定します。
今回作成する関数は「clock」で、その処理を毎秒呼び出したいので「1,000」とします。

setInterval(clock, 1000);

JavaScriptで、要素の内容を書き換える方法

JavaScriptを使って、ある要素の内容を書き換えるには、「innerHTML」を使います。
書き換えたい要素を「getElementById()」などで取得して、その「innerHTML」を指定してやることで変更可能です。
例えば、「sample」というIDが付与された要素の内容を「Hello」に書き換えるには、以下のようにします。

document.getElementById("sample").innerHTML = "Hello";

JavaScriptで、超シンプルなデジタル時計を作るまでの流れ

今回作成する超シンプルなデジタル時計プログラムを作るまでの流れは以下の通り。

1. HTMLで時計の表示部分を作成。
2. JavaScriptで時計の処理内容を作成。
3. CSSでデザイン調整。

それでは、以下から実際にプログラムを組んでいきましょう。

HTMLで時計の表示部分を作成

まずは、基本となる時計の表示部分を作成します。
日付と時刻を表示するspan要素を用意してあげているだけです。
JavaScriptは、「clock.js」を読み込むように指定しています。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>超シンプルなデジタル時計</title>
</head>
<body>
<span id="clock-date"></span><br>
<span id="clock-time"></span>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>

JavaScriptで時計の処理内容を作成

続いて、時計の更新処理を行う「clock.js」を作成します。
clock関数が、1回の更新で行う処理内容となります。

function clock() {
  // 曜日を表す文字列
  var weeks = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  // 現在の日付と時刻を取得
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var week = weeks[now.getDay()];
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  // 表示の調整
  if(month < 10) month = "0" + month;
  if(day < 10) day = "0" + day;
  if(hour < 10) hour = "0" + hour;
  if(minute < 10) minute = "0" + minute;
  if(second < 10) second = "0" + second;

  // 日時の情報を更新
  document.getElementById("clock-date").innerHTML = year + "/" + month + "/" + day + " ("+week+")";
  document.getElementById("clock-time").innerHTML = hour + ":" + minute + ":" + second;
}

setInterval(clock, 1000);

処理の流れとしては、まず現在の日付と時刻を取得します。
そして、月や日、時・分・秒が10未満の場合には0を付加します。
その後、日付と時刻を最新のものに更新しています。
非常に単純ですよね。
setInterval()で、1秒毎にclock()を呼び出すようにすることをお忘れなく。

CSSでデザイン調整

最後に、CSSを使ってデジタル時計のデザインを調整してみます。
ここでは、黒背景白文字、さらに時刻の表示を大きめにします。

body {
  background-color: #333333;
  padding: 10px;
}

#clock-date, #clock-time {
  color: #fefefe;
  font-size: 16px;
}

#clock-time {
  font-weight: bold;
  font-size: 30px;
}

もちろん、この部分はデザインのみの変更ですので…。
お好きなように書き換えてしまって構いませんよ。

完成版!超シンプルなデジタル時計

ここまでで、超シンプルなデジタル時計は完成です。
以下に、デジタル時計を埋め込んでみました。
正しく動作しているのが分かりますよね。

まとめ

今回の記事では、JavaScriptを使って超シンプルなデジタル時計プログラムを作成してみました。
いかがでしょうか?
時計の更新処理の方法さえ分かれば、後はすんなりと作成できるということが分かったのではないでしょうか。

せっかくプログラミングを学習していますので…。
どうせなら、もっと人の役に立つ高度なツールなどを作成してみたいですね。
もしくは、ウェブサービスとか。
ゲームアプリを作るのも悪くはなさそう。
やれることが多いので、悩んでしまいますよ(笑)。

もしあなたもプログラミングを学習しているのなら…。
学ぶだけではなくて、何か成果物を作ってみましょうね。
良い腕試しになりますし、スキルアップにも繋がりますよ!

コメント