Làm đồng hồ treo tường đơn giản bằng HTML, CSS và Javascript

Làm đồng hồ treo tường đơn giản bằng HTML, CSS và Javascript

Nếu bạn đang tìm kiếm một dự án thú vị để tạo ra một ứng dụng web sử dụng HTML, CSS và JavaScript, thì chúng tôi có một gợi ý tuyệt vời cho bạn - hãy cùng bắt đầu xây dựng một chiếc đồng hồ treo tường đơn giản. Đồng hồ treo tường không chỉ là một công cụ hữu ích để theo dõi thời gian, mà còn là một dự án lý thú để bạn thực hành và nắm vững ba ngôn ngữ lập trình cơ bản của web.

Trong hướng dẫn này, chúng ta sẽ dạo chơi qua quá trình tạo ra một đồng hồ treo tường hoàn chỉnh bằng HTML để xây dựng cấu trúc, CSS để tạo kiểu và trang trí, và cuối cùng là JavaScript để biến nó thành một ứng dụng có tính năng thực tế. Dự án này sẽ giúp bạn hiểu rõ hơn về cách kết hợp và tương tác giữa ba thành phần quan trọng này để tạo ra một sản phẩm web độc đáo.

Với sự sáng tạo và kiên nhẫn, bạn sẽ có cơ hội tạo ra một chiếc đồng hồ treo tường riêng biệt, thể hiện phong cách và cá nhân hóa theo ý muốn của bạn. Hãy cùng bắt đầu và khám phá hướng dẫn cụ thể về cách tạo đồng hồ treo tường đơn giản nhưng đầy tính thú vị này.

Bước 1: Thêm HTML


<div class="clock">
  <div class="hour">
    <div class="hr" id="hr"></div>
  </div>
  <div class="min">
    <div class="mn" id="mn"></div>
  </div>
  <div class="sec">
    <div class="sc" id="sc"></div>
  </div>
</div>

Bước 2: Thêm CSS


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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #54d1ff;
}

.clock {
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(clock.png);
    background-size: cover;
    background-color: #fff;
    border-radius: 50%;
    border: 20px solid #fff;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
}

.clock::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #848484;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 1000;
}

.hour, .min, .sec {
    position: absolute;
}

.hour, .hr {
    width: 160px;
    height: 160px;
}

.min, .mn {
    width: 190px;
    height: 190px;
}

.sec, .sc {
    width: 230px;
    height: 230px;
}


.hr, .mn, .sc {
    display: flex;
    justify-content: center;
    position: absolute;
    border: 50%;
}

.hr::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background-color: #848484;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}

.mn::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background-color: #d6d6d6;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

.sc::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 120px;
    background-color: #ff6767;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

Bước 3: Thêm Javascript


const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');

setInterval(() => {
  let date = new Date();

  let hh = date.getHours() * 30;
  let mm = date.getMinutes() * deg;
  let ss = date.getSeconds() * deg;

  hr.style.transform = `rotate(${hh + mm/12}deg)`;
  mn.style.transform = `rotate(${mm}deg)`;
  sc.style.transform = `rotate(${ss}deg)`;
})

Full tutorial:


Hoàn thành

Chúng ta đã hoàn thành một hành trình thú vị trong việc tạo ra một đồng hồ treo tường đơn giản bằng HTML, CSS và JavaScript. Qua dự án này, bạn đã được trải nghiệm cách kết hợp ba công nghệ quan trọng của web để tạo ra một sản phẩm có giá trị thực tế. Hy vọng rằng, việc thực hiện dự án này đã giúp bạn học hỏi và phát triển kỹ năng lập trình của mình.

Làm một chiếc đồng hồ treo tường đơn giản chỉ là một bước khởi đầu. Với kiến thức và kỹ năng bạn đã tích luỹ, bạn có thể dễ dàng mở rộng và tùy chỉnh sản phẩm này theo cách riêng của bạn. Hãy khám phá thêm các chức năng và tính năng mới, thử nghiệm với giao diện người dùng và tạo ra những thay đổi độc đáo.

Cuối cùng, hãy nhớ rằng việc học hỏi không bao giờ dừng lại. Web luôn thay đổi và phát triển, và có nhiều cơ hội mới để bạn khám phá. Hãy tiếp tục thực hiện các dự án, thách thức bản thân, và theo đuổi đam mê lập trình của bạn. Chúng tôi hy vọng bạn đã có một trải nghiệm thú vị và hữu ích trong hướng dẫn này và chúc bạn thành công trong những dự án sắp tới!

No comments:

Powered by Blogger.