アナログ時計の Web サイトを構築する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

王林

Aug 14, 2024 pm 12:38 PM

Build a Analog Clock Website

導入

開発者の皆さん、こんにちは！今日は、私が最近完了したプロジェクト、アナログ時計を共有できることを嬉しく思います。このプロジェクトは、従来のアナログ時計の文字盤を使用して時間を表示する、視覚的に魅力的でインタラクティブな方法です。これは、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 を使用して時計の動的側面を管理します。

インストール

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

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Analog-Clock.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Analog-Clock
```
ログイン後にコピー
プロジェクトを実行します:
- ローカルサーバー上で実行することも、単純に Web ブラウザでindex.html ファイルを開くこともできます。

使用法

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

コードの説明

HTML

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Analog Clock</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Analog Clock</h1>
    </div>
    <div id="clockContainer">
      <div id="hour"></div>
      <div id="minute"></div>
      <div id="second"></div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

ログイン後にコピー

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