Digital Clock đơn giản bằng HTML, CSS và Javascript

Digital Clock đơn giản bằng HTML, CSS và Javascript

Trong hướng dẫn ngắn này, chúng ta sẽ cùng nhau khám phá cách tạo một đồng hồ số đơn giản bằng sự kết hợp của HTML và CSS. Chúng ta sẽ tạo ra một giao diện đồng hồ thanh lịch chỉ bằng một vài dòng mã HTML và một chút mã CSS để tạo kiểu. Điều này sẽ giúp bạn hiểu cách tương tác giữa hai ngôn ngữ này để tạo ra một hiệu ứng thú vị. Bắt đầu thôi!

Bước 1: Thêm HTML


<div id="clock">
  <h2>The time is now</h2>
  <div id="time">
    <div><span id="hour">00</span><span>Hours</span></div>
    <div><span id="minutes">00</span><span>Minutes</span></div>
    <div><span id="seconds">00</span><span>Seconds</span></div>
    <div><span id="ampm"></span></div>
  </div>
</div>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #060a1f;
}

#clock h2 {
    color: #fff;
    text-align: center;
    margin: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
}

#clock #time {
    display: flex;
    align-items: flex-end;
}

#clock #time div {
    margin: 0 5px;
    -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(41, 41, 41, 0.267));
}

#clock #time div span {
    width: 100px;
    height: 80px;
    background-color: #54B435;
    color: #fff;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#clock #time div span:nth-child(2) {
    height: 30px;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 500;
    box-shadow: none;
    background-color: #82CD47;
    text-transform: uppercase;
    z-index: 9;
}

#clock #time div:last-child span {
    background-color: #fff;
    color: #333;
    width: 80px;
    height: 60px;
    font-size: 28px;
}

#clock #time div:nth-child(3) span {
    background-color: #ff006a;
}

#clock #time div:nth-child(3) span:nth-child(2) {
    background-color: #ec0062;
}

Bước 3: Thêm Javascript


function clock() {
  const hour = document.querySelector("#hour");
  const minutes = document.querySelector("#minutes");
  const seconds = document.querySelector("#seconds");
  const ampm = document.querySelector("#ampm");

  const date = new Date();

  let h = date.getHours();
  let m = date.getMinutes();
  let s = date.getSeconds();

  if (h > 12) {
    ampm.innerHTML = "PM";
  } else {
    ampm.innerHTML = "AM";
  }

  hour.innerHTML = h > 10 ? h : "0" + h;
  minutes.innerHTML = m > 10 ? m : "0" + m;
  seconds.innerHTML = s > 10 ? s : "0" + s;
}

const interval = setInterval(clock, 1000);

Full tutorial:


Hoàn thành

Kết luận lại, việc tạo một đồng hồ số bằng HTML và CSS không chỉ là một bài học về cách tương tác giữa hai ngôn ngữ này, mà còn thú vị và bổ ích. Bạn đã thấy cách sử dụng CSS để tạo kiểu cho các thành phần và cách HTML và CSS có thể hoạt động cùng nhau để tạo ra hiệu ứng động. Bước nhỏ này có thể dẫn bạn đến những dự án phức tạp hơn và sáng tạo hơn trong tương lai.

Hãy tiếp tục khám phá và nâng cao kỹ năng của mình trong lĩnh vực front-end. Nhớ rằng, việc thực hành và tìm hiểu liên tục sẽ giúp bạn ngày càng trở nên thành thạo hơn trong việc xây dựng các hiệu ứng và giao diện độc đáo trên web. Cảm ơn bạn đã theo dõi hướng dẫn này và chúc mừng bạn đã hoàn thành một bài học thú vị về việc sử dụng HTML và CSS để tạo đồng hồ số!

No comments:

Powered by Blogger.