Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Đồng Hồ bằng HTML CSS Javascript

Tạo Đồng Hồ bằng HTML CSS Javascript


Ngày 8 Tháng 2 Năm 2020

Tạo Đồng Hồ bằng HTML CSS Javascript

Xin chào các bạn quay lại blog của mình. Để các bạn có thể ôn lại và thực hành những gì mình đã học thì mình có tạo ra một project nho nhỏ là tạo đồng hồ bằng HTML CSS và Javascript. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Project Đồng Hồ

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc thư mục đồng hồ

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết để tạo đồng hồ cho trang_chinh.html sau đó liên kết nó với file style.css và Font "Open Sans" ở Google Font. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Đồng hồ điện tử</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="dong_ho">
        <h2>Thời gian bây giờ là:</h2>
        <div id="thoi_gian">
            <div>
                <span id="gio">00</span><span>Giờ</span>
            </div>
            <div>
                   <span id="phut">00</span><span>Phút</span>
            </div>
            <div>
                <span id="giay">00</span><span>Giây</span>
            </div>
        </div>
    </div>
</body>
</html>

Kế tiếp chúng ta sẽ thiết lập html và body trong file style.css với các bước là xác định font cho trang web, đưa nội dung ra chính giữa màn hình và thiết lập màu nền cho trang web của các bạn. Để nắm rõ hơn các bạn xem đoạn code và thêm vào file CSS của mình nhé:

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
body{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #FFA17F;
    background: -webkit-linear-gradient(to right, #00223E, #FFA17F);
    background: linear-gradient(to right, #00223E, #FFA17F);
   }

Các bạn cần lưu ý nếu chưa hiểu thuộc tính display:flex thì các bạn có thể tham khảo ở trang anh Thạch Phạm với đường link Tham Khảo để có thể hiểu rõ hơn đoạn code ở trên. Bây giờ chúng ta thử xem kết quả nhé:

Hình Ảnh Chỉnh CSS cho đồng hồ

Bây giờ thì tiếp tục chỉnh CSS cho thẻ h2 với các thuộc tính như vị trí, cỡ chữ, màu sắc, khoảng cách từ... Cái này các bạn cứ thoải mải tùy chỉnh nha miễn sao mình thấy đẹp là được không nhất thiết phải theo code ở dưới. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:

#dong_ho h2{
    position: relative;
    display:block;
    color:#fff;
    text-align: center;
    margin:10px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
}

Cùng mình xem kết quả của đoạn code trên:

Hình Ảnh Chỉnh CSS cho thẻ h2

Tiếp theo chúng ta cần các số, giờ, phút trong đồng hồ phải nằm cùng một hàng do đó các bạn sẽ chỉnh sửa CSS cho thẻ <div id="thoi_gian> với thuộc tính display:flex. Và tạo khoảng cách đối với các con số trong đồng hồ giúp người dùng có thể dễ dàng đọc hơn bằng thuộc tính margin. Để hiểu rõ các bạn xem đoạn code sau đây nhé:

#dong_ho #thoi_gian{
    display:flex;
}
#dong_ho #thoi_gian div{
    position: relative;
    margin: 0 5px;
}

Sau đây là kết quả của đoạn code trên:

Hình Ảnh Chỉnh CSS cho thẻ div

Bây giờ mình sẽ trang trí cho các thẻ span nằm trong div con như màu nền, độ cao, độ rộng, cỡ chữ... Trong code mình sẽ sử dụng thuộc tính z-index nếu cảm giác khó hiểu hay không biết về thuộc tính này thì các bạn có thể tham khảo đường dẫn này Tham khảo. Để nắm rõ các bạn xem đoạn code sau:

#dong_ho #thoi_gian div span{
    position: relative;
    display:block;
    width:200px;
    height: 160px;
    background: #2196f3;
    color: #fff;
    font-weight: 300;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    z-index:3;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

Và đây là kết quả của đoạn code trên nhé:

Hình Ảnh Chỉnh CSS cho thẻ span

Cũng khá là ổn rồi nhỉ nhưng thẻ span chứa chữ Giờ, Phút, Giây hơi lớn làm cho cảm giác đồng hồ của chúng ta nhìn hơi thô và thiếu thẩm mỹ. Để chỉnh sửa được thì chúng ta sẽ gọi như sau #dong_ho #thoi_gian span:nth-child(2){...} nhìn hơi khó hiểu nhưng các bạn cứ tuần tự từ trái sang phải là trong trong thẻ <div id="dong_ho"> thì lựa chọn thẻ con với <div id="thoi_gian"> sau đó lựa chọn trong các thẻ div con của nó thẻ span có vị trí thứ 2. Để hiểu rõ hơn các bạn xem đoạn code sau đây nhé:

#dong_ho #thoi_gian span:nth-child(2){
    height: 65px;
    font-size: 2rem;
    letter-spacing: 0.3rem;
    z-index: 2;
    box-shadow: none;
    background:#127fd6;
    text-transform: uppercase;
}

Sau đây là kết quả của đoạn code trên nhé:

Hình Ảnh Chỉnh CSS cho thẻ span thứ hai

Để làm đẹp hơn thì mình sẽ chỉnh nút giây cuối cùng có màu đỏ bằng cách đoạn code sau đây:

#dong_ho #thoi_gian div:last-child span {
    background: #ff006a;
}
#dong_ho #thoi_gian div:last-child span:nth-child(2) {
    background: #ec0062;
}

Kết quả của đoạn code trên ở hình dưới nhé:

Hình Ảnh Chỉnh CSS Background cho thẻ div

Bây giờ chúng ta sẽ sử dụng thuộc tính -webkit-box-reflect dùng để phản chiếu một đối tượng HTML theo một hướng cụ thể. Các bạn có thể tham khảo thuộc tính này theo đường dẫn sau đây: Tham Khảo. Mình sẽ thiết lập thuộc tính này cho các thẻ div con của <div id="thoi_gian">.Để nắm rõ hơn các bạn theo dõi đoạn code dưới dây nhé:

#dong_ho #thoi_gian div{
    position: relative;
    margin: 0 5px;
    -webkit-box-reflect: below 10px linear-gradient(transparent, #0004);
}

Và đây là kết quả của đoạn code trên nhé:

Hình Ảnh Chỉnh CSS hướng cho thẻ div

Coi như là các bạn đã xong được phần giao diện giờ chúng ta sẽ giúp đồng hồ hoạt động bằng đoạn script sau nhé:

<script>
    function Dong_ho() {
        var gio = document.getElementById("gio");
        var phut = document.getElementById("phut");
        var giay = document.getElementById("giay");
         var Gio_hien_tai = new Date().getHours();
        var Phut_hien_tai = new Date().getMinutes();
        var Giay_hien_tai = new Date().getSeconds();
         gio.innerHTML = Gio_hien_tai;
        phut.innerHTML = Phut_hien_tai;
        giay.innerHTML = Giay_hien_tai;
    }
    var Dem_gio = setInterval(Dong_ho, 1000);
</script>

Với hàm Dong_ho() mình sẽ lấy giờ phút giây hiện tại gắn vào các đối tượng HTML tương ứng. Nhưng nếu vậy thì đồng hồ bạn sẽ chỉ chạy được một lần và ngưng do đó chúng ta cần biến Dem_gio giúp mình có thể gọi lại hàm sau 1 giây để giúp đồng hồ có thể chạy liên tục. Và dưới đâ là video demo của mình:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục Dong_ho để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình mong các bạn có thể ôn và hiểu hơn về những gì mình đã học về HTML, CSS, Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!