IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プログラミング

【Javascript】デジタル時計とアナログ時計の作り方!

投稿日:

【Javascript】デジタル時計とアナログ時計の作り方!

今回はJavascriptで時計を作ってみた。

Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。

ウェブ屋としてはHTMLと親和性も高いことから必然的に習得した技術の賜物である。

そこでJavascriptを少しでも短に感じれる様に定期的に何かプログラムを使って作品を作っていくことにする。

その第一弾はありがちだが時計を作成した。

Javascriptでデジタル時計を作成【.jsファイル】

今回はシンプルなデジタル時計を作成することにする。

javascriptでデジタル時計を完成させる

(完成したイメージ)

必要な情報は「日付」と「時刻」だけだ。

シンプルなデジタル時計を作るために必要なファイルは3つ。

「.html」「.css」「.js」ファイルだけ。

これでブラウザ上に時計を出現させることが可能だ。

まずは時計に必要な関数をJavascriptで構成していく。

必要な情報は「年」「月」「日」「曜日」「時」「分」「秒」の7種類だ。

これらの変数を定義する。

変数の定義は「y=年」や「d=日」など分かりやすいもので良いと思う。

曜日に関しては配列にて格納する。

「Array(“Sun”,”Mon”,”Thu”,”Wed”,”Thr”,”Fri”,”Sat”);」

と言った感じにする。

次にイメージの様に月日や時間などを常に2桁(0を頭につける)表示させる。

最後はjavascriptの「document.getElementById」で変数を結合して表示させてやれば完了。

完成したjavascriptファイルはこんな感じで仕上がった。

「.js」ファイルの完成。

Javascriptでデジタル時計を作成【.cssファイル】

次に画面の調整役である「.css」ファイルの作成について。

ここからは「.html」ファイルと同時進行で調整していく。

記事なので別々の見出しで書くが、「.html」ファイルと同時進行で作成する。

まずはイメージと合わせるのであれば全体のカラーを決定する。

「body」タグにカラーと背景カラーを設定する。

その他にも画面の表示幅の設定や、文字のフォントなどを「.css」ファイルで指定する。

作成した「.css」ファイルはこちら。

「.css」ファイルは比較的簡単。

Javascriptでデジタル時計を作成【.htmlファイル】

最後に「.html」ファイルの設定。

と言ってもこれまでのjavascriptとcssの設定が完了していれば何もすることはない。

それぞれのファイルを「head」タグで読み込ませてお終い。

「.js」や「.css」ファイルの読み込みは「<link rel=””>」「<script src=””>」を使用する。

また「body」タグではjavascriptで定義した関数を呼び出して表示させる。

javascriptで定義した関数は3つ。

(clock_date, clock_time, clock_frame)

これらを「.html」ファイルの「body」タグ内に記述して終了。

最後は同じフォルダに全てのファイルを配置して完成。

Javascriptでアナログの時計を作成【.jsファイル】

今度はアナログの時計を作成してみることにしよう。

目標イメージはこんな感じで作成する。

javascriptでアナログ時計を作成する

本物の時計はデジタルの方が高度な技術だが、Javascriptで時計を作成する場合アナログ時計の方が高度な技術が必要になる。

この難しさとは画像を使うことにある。

デジタルでは数字だけを取り扱うのでプログラミングの場合、より簡単なのだ。

だがアナログ時計では画像ファイルが必要になる。

この点を考慮した作りにしなければならない。

まずは「.js」ファイルから作成する。

いくつかやり方があるのだが、わたしはパターンとしてjavascriptに全てを投入した。

画像の定義をjavascriptで表示することにする。

(htmlやcssで画像を読み込むことは可能)

作成した「.js」ファイル。

画像のサイズに合わせて作成する必要がある。

よりリアルな時計を目指すのであれば指針の画像の横幅は狭い方が良い。

Javascriptでアナログの時計を作成【.cssファイルと.htmlファイル】

次に「.css」ファイルだがこちらは特に必要な項目はない。

センタリング用のタグを設定しただけだ。

「body」タグに「text-align」と「margin」で好みの指定値を施すだけ。

最後に「.html」ファイルだがこちらも特に必要な項目はない。

必要な項目と言えば、「head」タグ内で「.js」ファイルと「.css」ファイルのインポート。

あとは「canvas」タグの設定だろう。

「canvas」タグの縦横幅の設定はjavascriptで読み込む時計の基盤となる画像に合わせれば良い。

ほぼ全てをjavascriptに完結する形で今回はアナログ時計を作成した。

今回はデジタル時計とアナログ時計の両方の作成を紹介した。

個人的にはデジタル時計の方が遥かに簡単に作ることができる。

物理的な画像が必要ないのは大きい。

世の中全てデジタルなら簡単なのだが、、、

とは言えないのが人生である。

今日も良い1日を。

      

-プログラミング

執筆者:

関連記事

【jQuery】Javascriptで横スクロールのスライドショー!

【jQuery】Javascriptで横スクロールのスライドショー!

今回はJavascriptを使ったプログラミング作品の一例。 よくある横スクロール型のスライドショーをウェブサイトに組み込んでみる。 横スクロールはJavascriptの定番機能だが基礎的な作り方が学 …

【CSS/Javascript】ナビゲーションバーをトップに固定!

【CSS/Javascript】ナビゲーションバーをトップに固定!

ナビゲーションバーをウェブサイトのトップに固定する手順。 ひと昔であればjQueryなど使って対応していたが、今はCSSだけでも十分に対応できる時代になった。 今回はJavascriptの知識もかねて …

VBA開発でよくあるエラーまとめ!エラー出現ランキング!

【解決策あり】VBAのエラーまとめ!エラーランキング5!

仕事でVBA案件をもらうことがある。 わたしは元々VBAが最も得意だった。 VBAとはマクロの事だ。 プログラミング言語の中ではシンプルな言語でわかりやすい。 今回、数多くのVBA案件をこなしていく中 …

【簡単】Javascriptを使ってサクッとQRコードを発行する!

【簡単】Javascriptを使ってサクッとQRコードを作成!

今回は思いっきりプログラミングのことについて書こう。 と言っても内容は至って簡単なコードだけだ。 実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。 先日、あるクラ …

ITエンジニアになるならHTMLから始める事をオススメ!

ITエンジニアになるならHTMLから始める事をオススメ!

わたしは現在ITエンジニアとしてフリーランスをやらせてもらっている。 最初からフリーランスエンジニアを目指して活動をしていたわけでないが、自然と始めたことがある。 それがウェブ系のプログラミング言語H …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール