Bina Laman Web Jam Analog

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

• 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:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Analog-Clock
   

3. Jalankan projek:

   • Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. 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:

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

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

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);

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!

Kredit

Projek ini diilhamkan oleh reka bentuk klasik jam analog dan keperluan untuk alat paparan masa nyata yang ringkas.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Jam Analog. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!