1
2

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 1 year has passed since last update.

# JavaScriptで「世界時計」Webアプリケーションを作ってみた

Last updated at Posted at 2022-03-22

私がプログラミングの勉強を始めて2年くらい経ちましたが、昔初めて作ったWebアプリケーションのファイルが残っていたので、これについて記事にしていこうと思います。

「World Clock Maker」

今回紹介するものは、任意の国のアナログ時計とデジタル時計を一括表示するwebアプリケーションです。イメージは以下のような感じです。

Demoページは以下のリンクからどうぞ!
「World Clock Maker」- Display World Date & Time

仕様

使い方はDemoページに記されていますが、ここにも簡単に記しておきます。

  1. Addボタンを押してタイムゾーンを選択する。
  2. 選択した後Addボタンをクリックすることで、その地域の日付、時刻を表示される。
  3. 削除する場合はDelete Allボタンをクリックする。

これだけなので、シンプルな仕組みだと思います。

作ったきっかけ

きっかけはiPhoneにある「世界時計」をデジタルとアナログ両方の形式で表されるものを作ろうと思ったことです。これのおかげで、JavaScriptのいい勉強になったのではないかと思います。

作った時計の問題点

現状一つの問題があって、それは表示時刻が少しずつ遅延してしまうことです。
表示時刻の更新は1秒ごとにやっていますが、その際処理に若干時間がかかってしまいます。そのため、以下の図のようにわずかな遅延が積み重なってしまい正しい時間表示ができなくなっております。現在その解決策は検討できておりません。
1.png

コード

特にアップロードしませんが、ブラウザの「開発ツール」を開けば全て見れます。
JavaScript,HTML,CSSの3つを使って作っているためです。
興味のある方はそちらをどうぞ。
※初心者が作成したものなので、コードの汚さはご了承いただければと思います(笑)

注意事項

Demoページで表示可能な時計の個数は無制限にしておりますが、あまりにも多く表示させるとPCのパフォーマンスに影響が出る場合がありますので、ご注意ください。

参考

アナログ時計の作り方は、YouTubeの"Online Tutorials"さんのこちらの動画を参考にさせてもらいました。

以上となります。

1
2
3

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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?