アナログ時計の Web サイトを構築する

導入

開発者の皆さん、こんにちは！今日は、私が最近完了したプロジェクト、アナログ時計を共有できることを嬉しく思います。このプロジェクトは、従来のアナログ時計の文字盤を使用して時間を表示する、視覚的に魅力的でインタラクティブな方法です。これは、JavaScript、CSS、HTML のスキル、特にアニメーション、DOM 操作、時間ベースの関数の操作を磨くのに最適なプロジェクトです。練習したい初心者でも、クラシックな時計インターフェイスを作成したい経験豊富な開発者でも、このプロジェクトは素晴らしい選択肢です。

プロジェクト概要

アナログ時計は、従来のアナログ時計の外観と機能を模倣したリアルタイム クロックです。時計は毎秒動的に更新され、時針、分針、秒針がスムーズに回転して現在の時刻を反映します。このプロジェクトは、動的で視覚的に魅力的な Web アプリケーションの構築を練習したい開発者に最適です。

特徴

• リアルタイム クロック: クロックは 1 秒ごとに更新され、時針、分針、秒針の動きで現在の時刻を示します。
• スムーズなアニメーション: 時計の針がスムーズに回転し、リアルなアナログ時計効果を作り出します。
• レスポンシブ デザイン: 時計はレスポンシブになるように設計されており、さまざまなデバイスや画面サイズで適切に表示されます。
• ミニマリスト デザイン: この時計は、機能性と優雅さを重視した、すっきりとしたシンプルなデザインが特徴です。

使用されている技術

• HTML: Web ページと時計のレイアウトを構造化するために使用されます。
• CSS: 針の位置決めやスムーズなアニメーションの追加など、時計のスタイルを設定するために適用されます。
• JavaScript: 時計の時間計算を処理し、DOM を更新し、針の回転を管理するために実装されています。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

Analog-Clock/
├── index.html
├── style.css
└── script.js

• index.html: Web ページの HTML 構造が含まれます。
• style.css: アニメーションやレスポンシブ デザインを含む CSS スタイルを保持します。
• script.js: JavaScript を使用して時計の動的側面を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

   git clone https://github.com/abhishekgurjar-in/Analog-Clock.git
   

2. プロジェクト ディレクトリを開きます:
   

   cd Analog-Clock
   

3. プロジェクトを実行します:

   • ローカルサーバー上で実行することも、単純に Web ブラウザでindex.html ファイルを開くこともできます。

使用法

1. Web ブラウザで Web サイトを開きます。
2. 時計を見てください。時針、分針、秒針の滑らかなアニメーションで現在時刻が表示されます。

コードの説明

HTML

index.html ファイルは、時計コンテナーやヘッダーなどの Web ページの構造を設定します。以下は HTML コードのスニペットです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Analog Clock6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Analog Clock473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    79794d8004b182431dd9645149aae01b
      ae3ec3e20c207b48c6a71e25c698c4a416b28748ea4df4d9c2150843fecfba68
      639d12f8b0b9d4dac7618dcf544a40a216b28748ea4df4d9c2150843fecfba68
      ae78b0f312e3cd17c752800dca089cb816b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css ファイルは時計のコンテナと針のスタイルを設定し、時計が正しく回転して時刻を表示するようにします。主なスタイルは次のとおりです:

#clockContainer {
  position: relative;
  margin: auto;
  height: 30vw;
  width: 30vw;
  background: url(clock.png) no-repeat;
  background-size: 100%;
}

#hour,
#minute,
#second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

#hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

#minute {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}

#second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
}

.header {
  margin: 80px;
  text-align: center;
}

.footer {
  margin: 50px;
  text-align: center;
}

JavaScript

script.js ファイルは現在時刻の計算を処理し、それに応じて時計の針の回転を更新します。以下は JavaScript コードのスニペットです:

setInterval(() => {
  const date = new Date();
  const hourTime = date.getHours();
  const minuteTime = date.getMinutes();
  const secondTime = date.getSeconds();

  const hourRotation = 30 * hourTime + minuteTime / 2;
  const minuteRotation = 6 * minuteTime;
  const secondRotation = 6 * secondTime;

  const hour = document.getElementById('hour');
  const minute = document.getElementById('minute');
  const second = document.getElementById('second');

  hour.style.transform = `rotate(${hourRotation}deg)`;
  minute.style.transform = `rotate(${minuteRotation}deg)`;
  second.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);

ライブデモ

ここでアナログ時計のライブデモをチェックできます。

結論

このアナログ時計の構築は、JavaScript アニメーションと DOM 操作をさらに深く掘り下げることができた、やりがいのある経験でした。このプロジェクトが、インタラクティブで視覚的に魅力的な独自のアプリケーションを作成するきっかけとなることを願っています。自由にコードを調べ、カスタマイズし、独自のプロジェクトで使用してください。コーディングを楽しんでください!

クレジット

このプロジェクトは、アナログ時計の古典的なデザインと、シンプルなリアルタイム時間表示ツールの必要性からインスピレーションを受けました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がアナログ時計の Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。