Bina Tapak Web Pemasa Countdown-tutorial js-php.cn

Bina Tapak Web Pemasa Countdown

PHPz

Lepaskan： 2024-08-14 12:37:20

asal

991 orang telah melayarinya

Build a Countdown Timer Website

pengenalan

Helo, rakan pembangun! Hari ini, saya teruja untuk berkongsi projek yang baru saya siapkan: Pemasa Undur. Projek ini ialah cara yang bagus untuk mempelajari dan mengamalkan JavaScript, terutamanya dalam bidang manipulasi masa dan kemas kini DOM. Sama ada anda ingin membina kira detik untuk acara, pelancaran produk atau hanya pemasa yang menyeronokkan, projek ini adalah permulaan yang sempurna.

Gambaran Keseluruhan Projek

Pemasa Undur membolehkan pengguna menetapkan tarikh dan masa sasaran, dan ia akan terus mengira detik hari, jam, minit dan saat sehingga detik itu tiba. Pemasa dikemas kini dalam masa nyata, menawarkan reka bentuk yang menarik dan responsif secara visual. Projek ini sesuai untuk pembangun yang ingin meningkatkan kemahiran mereka dalam mencipta aplikasi web yang dinamik dan interaktif.

Ciri-ciri

Undur Masa Nyata: Pemasa dikemas kini setiap saat, menunjukkan baki masa sehingga tarikh yang ditentukan.
Reka Bentuk Responsif: Reka letak menyesuaikan dengan lancar merentas peranti dan saiz skrin yang berbeza.
Tarikh Tamat Boleh Disesuaikan: Tarikh dan masa sasaran boleh diubah suai dengan mudah, menjadikan pemasa serba boleh untuk pelbagai acara.

Teknologi yang Digunakan

HTML: Digunakan untuk menstruktur kandungan pada halaman web.
CSS: Digunakan untuk menggayakan halaman web dan memastikan responsif.
JavaScript: Dilaksanakan untuk mengira baki masa dan mengemas kini DOM dalam masa nyata.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

Countdown-Timer/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML halaman web.
style.css: Memegang gaya CSS, termasuk peraturan reka bentuk responsif.
script.js: Mengurus logik kira detik dan kemas kini DOM menggunakan JavaScript.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git

Salin selepas log masuk

Buka direktori projek:
```
cd Countdown-Timer
```
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.
Lihat pemasa mengira detik hingga tarikh tamat yang ditentukan.
Sesuaikan tarikh tamat dalam fail script.js agar sesuai dengan acara atau keperluan anda.

Penerangan Kod

HTML

Fail index.html mengandungi struktur halaman web, termasuk paparan kira detik dan pengepala ringkas. 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>Countdown Timer</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="main">
      <div class="overlay">
        <div class="header">
          <h1>Countdown Timer</h1>
        </div>
        <div class="title">We are coming soon</div>
        <div class="title" id="end-date">4 July 2025 10:00 PM</div>
        <div class="col">
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Days</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Hours</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Minutes</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Seconds</label>
          </div>
        </div>
        <div class="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Salin selepas log masuk

CSS

Fail style.css mengandungi gaya yang memastikan halaman web menarik secara visual dan termasuk responsif untuk saiz skrin yang berbeza. Berikut ialah beberapa gaya utama:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.main {
  width: 100%;
  height: 100vh;
  background: url(./images/bg.jpg);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.title {
  color: white;
  text-align: center;
  font-size: 2.5rem;
  padding: 25px;
}

.col {
  margin-top: 10px;
  width: 1000px;
  color: white;
  justify-content: center;
  display: flex;
}

.col div {
  width: 250px;
  text-align: center;
}

input {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

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

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

Salin selepas log masuk

JavaScript

Fail script.js menguruskan logik kira detik, mengemas kini paparan setiap saat. Di bawah ialah coretan kod JavaScript:

const endDate = "4 July 2025 10:00 PM";

document.getElementById("end-date").innerText = endDate;
const input = document.querySelectorAll("input");

function countDown() {
  const end = new Date(endDate);
  const now = new Date();
  const diff = (end - now) / 1000;

  if (diff < 0) return;

  input[0].value = Math.floor(diff / 3600 / 24);
  input[1].value = Math.floor(diff / 3600) % 24;
  input[2].value = Math.floor(diff / 60) % 60;
  input[3].value = Math.floor(diff) % 60;
}

countDown();
setInterval(countDown, 1000);

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Pemasa Undur di sini.

Kesimpulan

Membina Pemasa Undur ini merupakan pengalaman pembelajaran yang berharga yang membolehkan saya menerokai keupayaan JavaScript dalam manipulasi masa dan interaksi DOM. Saya harap projek ini memberi inspirasi kepada anda untuk mencipta aplikasi dinamik dan interaktif anda sendiri. Jangan ragu untuk meneroka kod, menyesuaikannya dan menggunakannya dalam projek anda sendiri. Selamat mengekod!