Bina Laman Web Jam Analog-tutorial js-php.cn

Bina Laman Web Jam Analog

王林

Lepaskan： 2024-08-14 12:38:10

asal

683 orang telah melayarinya

Build a Analog Clock Website

pengenalan

Helo, rakan pembangun! Hari ini, saya sangat teruja untuk berkongsi projek yang baru saya siapkan: Jam Analog. Projek ini ialah cara yang menarik secara visual dan interaktif untuk memaparkan masa menggunakan muka jam analog tradisional. Ia merupakan projek yang sangat baik untuk mengasah kemahiran JavaScript, CSS dan HTML anda, terutamanya dalam bekerja dengan animasi, manipulasi DOM dan fungsi berasaskan masa. Sama ada anda seorang pemula yang ingin berlatih atau pembangun berpengalaman yang ingin mencipta antara muka jam klasik, projek ini ialah pilihan yang bagus.

Gambaran Keseluruhan Projek

Jam Analog ialah jam masa nyata yang meniru rupa dan kefungsian jam analog tradisional. Jam secara dinamik mengemas kini setiap saat, dengan jam, minit dan jarum detik berputar dengan lancar untuk mencerminkan masa semasa. Projek ini sesuai untuk pembangun yang ingin berlatih membina aplikasi web yang dinamik dan menarik secara visual.

Ciri-ciri

Jam Masa Nyata: Jam dikemas kini setiap saat, menunjukkan masa semasa dengan jam bergerak, minit dan jarum kedua.
Animasi Lancar: Jarum jam berputar dengan lancar, menghasilkan kesan jam analog yang realistik.
Reka Bentuk Responsif: Jam direka bentuk untuk responsif, memastikan ia kelihatan hebat pada pelbagai peranti dan saiz skrin.
Reka Bentuk Minimalis: Jam ini menampilkan reka bentuk yang bersih dan ringkas, memfokuskan pada fungsi dan keanggunan.

Teknologi yang Digunakan

HTML: Digunakan untuk menstruktur halaman web dan reka letak jam.
CSS: Digunakan untuk menggayakan jam, termasuk meletakkan kedudukan tangan dan menambah animasi yang lancar.
JavaScript: Dilaksanakan untuk mengendalikan pengiraan masa jam, mengemas kini DOM dan mengurus putaran tangan.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML halaman web.
style.css: Memegang gaya CSS, termasuk animasi dan reka bentuk responsif.
script.js: Menguruskan aspek dinamik jam menggunakan JavaScript.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Analog-Clock
```
Salin selepas log masuk
Jalankan projek:
- Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Tonton jam kerana ia memaparkan masa semasa dengan animasi lancar jam, minit dan jarum kedua.

Penerangan Kod

HTML

Fail index.html menyediakan struktur halaman web, termasuk bekas jam dan pengepala. Di bawah ialah coretan kod 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>

Salin selepas log masuk

CSS

Fail style.css menggayakan bekas dan tangan jam, memastikan ia berputar dengan betul untuk memaparkan masa. Gaya utama termasuk:

#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;
}

Salin selepas log masuk

JavaScript

Fail script.js mengendalikan pengiraan masa semasa dan mengemas kini putaran jarum jam dengan sewajarnya. Di bawah ialah coretan kod 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);

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Jam Analog di sini.

Kesimpulan

Membina Jam Analog ini merupakan pengalaman yang bermanfaat yang membolehkan saya mendalami animasi JavaScript dan manipulasi DOM. Saya harap projek ini memberi inspirasi kepada anda untuk mencipta aplikasi interaktif dan menarik secara visual anda sendiri. Jangan ragu untuk meneroka kod, menyesuaikannya dan menggunakannya dalam projek anda sendiri. Selamat mengekod!