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

 
 
     
     
     
     
     
     
 
 
     
         
Thời gian bây giờ là:

         
             

                 00

Giờ
            
            

Phút
            
            

Giây
            
        
    

Kế tiếp tất cả chúng ta sẽ thiết lập html và body toàn thân trong file style.css với những bước là xác lập font cho website, đưa nội dung ra chính giữa màn hình hiển thị và thiết lập màu nền cho website của những bạn. Để nắm rõ hơn những 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é:

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 tác dụng của đoạn code trên :

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ẻ

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à hiệu quả của đoạn code trên nhé :

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ẻ

thì lựa chọn thẻ con với

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à tác dụng của đoạn code trên nhé :Để làm đẹp hơn thì mình sẽ chỉnh nút giây ở đầu cuối 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é :

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

.Để 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à hiệu quả của đoạn code trên nhé :Coi như là những bạn đã xong được phần giao diện giờ tất cả chúng ta sẽ giúp đồng hồ hoạt động giải trí bằng đoạn script sau nhé :

Với hàm Dong_ho ( ) mình sẽ lấy giờ phút giây hiện tại gắn vào những đối tượng người dù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 đó tất cả chúng ta cần biến Dem_gio giúp mình hoàn toàn có thể gọi lại hàm sau 1 giây để giúp đồng hồ hoàn toàn 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

Nếu bạn muốn tham khảo các thiết kế đồng hồ dành cho website thì truy cập đường dẫn bên dưới nha.
Clock CSS Javascript

Tổng kết:

Qua đây mình mong những bạn hoàn toà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ó vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !