私がプログラミングの勉強を始めて2年くらい経ちましたが、昔初めて作ったWebアプリケーションのファイルが残っていたので、これについて記事にしていこうと思います。
「World Clock Maker」
今回紹介するものは、任意の国のアナログ時計とデジタル時計を一括表示するwebアプリケーションです。イメージは以下のような感じです。
Demoページは以下のリンクからどうぞ!
「World Clock Maker」- Display World Date & Time
仕様
使い方はDemoページに記されていますが、ここにも簡単に記しておきます。
- Addボタンを押してタイムゾーンを選択する。
- 選択した後Addボタンをクリックすることで、その地域の日付、時刻を表示される。
- 削除する場合はDelete Allボタンをクリックする。
これだけなので、シンプルな仕組みだと思います。
作ったきっかけ
きっかけはiPhoneにある「世界時計」をデジタルとアナログ両方の形式で表されるものを作ろうと思ったことです。これのおかげで、JavaScriptのいい勉強になったのではないかと思います。
作った時計の問題点
現状一つの問題があって、それは表示時刻が少しずつ遅延してしまうことです。
表示時刻の更新は1秒ごとにやっていますが、その際処理に若干時間がかかってしまいます。そのため、以下の図のようにわずかな遅延が積み重なってしまい正しい時間表示ができなくなっております。現在その解決策は検討できておりません。
コード
特にアップロードしませんが、ブラウザの「開発ツール」を開けば全て見れます。
JavaScript,HTML,CSSの3つを使って作っているためです。
興味のある方はそちらをどうぞ。
※初心者が作成したものなので、コードの汚さはご了承いただければと思います(笑)
注意事項
Demoページで表示可能な時計の個数は無制限にしておりますが、あまりにも多く表示させるとPCのパフォーマンスに影響が出る場合がありますので、ご注意ください。
参考
アナログ時計の作り方は、YouTubeの"Online Tutorials"さんのこちらの動画を参考にさせてもらいました。
以上となります。