Tạo đồng hồ treo tường với HTML và CSS

Hầu như mỗi nhà đều có một chiếc đồng hồ treo tường, và trang web cũng tương tư. Nó giống như một ngôi nhà riêng của chúng ta trang mạng. Do vậy việc thiết kế nên chiếc đồng hồ cũng rất cần thiết. Hôm nay, các bạn sẽ cùng kiso thao tác để tạo chiếc đồng hồ bên dưới

tao dong ho treo tuong JPG

1. Phần HTML

Phần bố cục cho đồng hồ khá phức tạp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="clock1.css">
  <script src="main.js"></script>
</head>
<body>
  <div class="clock">
    <div class="hourHand"></div>
    <div class="minuteHand"></div>
    <div class="sec"><div class="secondHand"></div></div>
    <div class="center"></div>
    <div class="red-center center"></div>
    <ul>
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
        <li><span>7</span></li>
        <li><span>8</span></li>
        <li><span>9</span></li>
        <li><span>10</span></li>
        <li><span>11</span></li>
        <li><span>12</span></li>
    </ul>
  </div>
  
</body>
</html>

Bao gồm phần các kim đồng hồ và phần số. Riêng phần kim giây có cấu tạo hơi khác di cách di chuyển khác biệt của nó. Điều mà kiso sẽ đề cập trong phần CSS.

2. Phần CSS

Trước hết hãy lướt qua toàn bộ đoạn mã

Bài viết này được đăng tại [kiso.vn]

body{
  background-color: teal;;
  padding: 0;
  margin: 0;
}

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: whitesmoke;
  margin: 100px auto 0px auto;
  position: relative;
  border: 5px solid #1a0000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center{
  background-color: #000;
  position: absolute;
  left: calc(50% - 10px);
  top:  calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 20;
}

.red-center {
  width: 8px;
  height: 8px;
  z-index: 30;
  background-color: red;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
}

.hourHand{
  width: 10px;
  height: 75px;
  background-color: #000;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: 75px;
  left: 145px;
  z-index: 10;
  transform: rotate(150deg);
  animation: hourMove 43200s linear infinite;
  outline: 100px solid transparent;
}

@keyframes hourMove {
  0% {
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(510deg);
  }
}

.minuteHand{
  width: 5px;
  height: 120px;
  background-color: #000;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: 30px;
  left: 147px;
  z-index: 9;
  transform: rotate(0);
  animation: minMove 3600s linear infinite;
  outline: 100px solid transparent;
}

@keyframes minMove {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.secondHand{
  width: 2px;
  height: 150px;
  background-color:red;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: -120px;
  left: -1px;
  transition: all 0.06s;
  z-index: 8;  
  transform: rotate(0);
  outline: 100px solid transparent;
}

.sec {
  position: relative;
  z-index: 30;
  animation: secMove 60s normal infinite steps(60,end);
}

@keyframes secMove {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.clock ul{
  list-style: none;
  padding: 0;

}
.clock ul li{
  position: absolute;
  width:20px;
  height:20px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  columns: #000;
  font-family: "Droid Serif", serif;
}

.clock ul li:nth-child(1){
  right: 22%;
  top: 6.5%;
}

.clock ul li:nth-child(2){
  right: 6%;
  top: 25%;
}

.clock ul li:nth-child(3){
  right: 1%;
  top: calc(50% - 10px);
}

.clock ul li:nth-child(4){
  right: 6%;
  top: 69%;
}

.clock ul li:nth-child(5){
  right: 22%;
  top: 84%;
}

.clock ul li:nth-child(6){
  right: calc(50% - 10px);
  top: calc(99% - 20px);
}

.clock ul li:nth-child(7){
  left: 22%;
  top: 84%;
}

.clock ul li:nth-child(8){
  left: 6%;
  top: 69%;
}

.clock ul li:nth-child(9){
  left: 1%;
  top: calc(50% - 10px);
}

.clock ul li:nth-child(10){
  left: 6%;
  top: 25%;
}

.clock ul li:nth-child(11){
  left: 22%;
  top: 6.5%;
}

.clock ul li:nth-child(12){
  right: calc(50% - 10px);
  top: 1%;
}

Bước 1: tạo định dạng cho thẻ body

body{
  background-color: teal;;
  padding: 0;
  margin: 0;
}

Bước 2: tạo định dạng cho đồng hồ

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: whitesmoke;
  margin: 100px auto 0px auto;
  position: relative;
  border: 5px solid #1a0000;
  display: flex;
  justify-content: center;
  align-items: center;
}

Chú ý thiết lập thuộc tính position: relative vì các phần tử con sẽ phụ thuộc thẻ này.

Bước 3: tạo chấm tròn trung tâm màu đen

.center{
  background-color: #000;
  position: absolute;
  left: calc(50% - 10px);
  top:  calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 20;
}

Đây xem như là bước tạo trục chính cho kim giờ và kim phút.

Chú ý để canh giữa ta thiết lập như sau

{
  left: calc(50% - 10px);
  top:  calc(50% - 10px);
}

Giá trị 10px tức là bằng một nửa chiều cao và rộng của chấm tròn.

Bước 4: tạo chấm tròn đỏ cho kim giây

.red-center {
  width: 8px;
  height: 8px;
  z-index: 30;
  background-color: red;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
}

Bước này tương tự bước 3 nhưng lưu ý thiết lập lại các giá trị

{
  z-index: 30;
  background-color: red;
}

Bước 5: tạo kim giờ

.hourHand{
  width: 10px;
  height: 75px;
  background-color: #000;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: 75px;
  left: 145px;
  z-index: 10;
  transform: rotate(150deg);
  animation: hourMove 43200s linear infinite;
  outline: 100px solid transparent;
}

Bước 6: tạo di chuyển cho kim giờ

@keyframes hourMove {
  0% {
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(510deg);
  }
}

Bước 7: tạo kim phút

.minuteHand{
  width: 5px;
  height: 120px;
  background-color: #000;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: 30px;
  left: 147px;
  z-index: 9;
  transform: rotate(0);
  animation: minMove 3600s linear infinite;
  outline: 100px solid transparent;
}

Bước 8: tạo di chuyển cho kim phút

@keyframes minMove {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Bước 9: tạo kim giây

.secondHand{
  width: 2px;
  height: 150px;
  background-color:red;
  transform-origin: bottom center;
  border-radius: 4px;
  position: absolute;
  top: -120px;
  left: -1px;
  transition: all 0.06s;
  z-index: 8;  
  transform: rotate(0);
  outline: 100px solid transparent;
}

Bước 10: tạo lớp bao đóng cho kim giây

.sec {
  position: relative;
  z-index: 30;
  animation: secMove 60s normal infinite steps(60,end);
}

Chú ý trong thuộc tính animation giá trị steps(60, end) được thiết lập để tạo bước di chuyển chân thật như ngoài thực tế.

Bước 11: tạo di chuyển cho kim giây

@keyframes secMove {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Bước 12: tạo các giá trị giờ

.clock ul{
  list-style: none;
  padding: 0;

}
.clock ul li{
  position: absolute;
  width:20px;
  height:20px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  columns: #000;
  font-family: "Droid Serif", serif;
}

Bước 13: định dạng vòng tròn số

.clock ul li:nth-child(1){
  right: 22%;
  top: 6.5%;
}

.clock ul li:nth-child(2){
  right: 6%;
  top: 25%;
}

.clock ul li:nth-child(3){
  right: 1%;
  top: calc(50% - 10px);
}

.clock ul li:nth-child(4){
  right: 6%;
  top: 69%;
}

.clock ul li:nth-child(5){
  right: 22%;
  top: 84%;
}

.clock ul li:nth-child(6){
  right: calc(50% - 10px);
  top: calc(99% - 20px);
}

.clock ul li:nth-child(7){
  left: 22%;
  top: 84%;
}

.clock ul li:nth-child(8){
  left: 6%;
  top: 69%;
}

.clock ul li:nth-child(9){
  left: 1%;
  top: calc(50% - 10px);
}

.clock ul li:nth-child(10){
  left: 6%;
  top: 25%;
}

.clock ul li:nth-child(11){
  left: 22%;
  top: 6.5%;
}

.clock ul li:nth-child(12){
  right: calc(50% - 10px);
  top: 1%;
}

Ở bước này canh chỉnh tỷ lệ phần trăm cho hợp lý.

3. Lấy thời gian hiện tại

Nếu như các bạn muốn lấy thời gian hiện tại luôn thì thêm đoạn javascript tai đây. Sẽ có được hiệu ứng như demo bên dưới

window.onload = function() {

  const hourHand = document.querySelector('.hourHand');
      const minuteHand = document.querySelector('.minuteHand');
      const secondHand = document.querySelector('.sec');
  
      function setDate() {
          const today = new Date();
          
          const second = today.getSeconds();
          const secondDeg = ((second / 60) * 360) + 360; 
          secondHand.style.transform = `rotate(${secondDeg}deg)`;
          
          const minute = today.getMinutes();
          const minuteDeg = ((minute / 60) * 360); 
          minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
  
          const hour = today.getHours();
          const hourDeg = ((hour / 12 ) * 360 ); 
          hourHand.style.transform = `rotate(${hourDeg}deg)`;
          
      }
      setInterval(setDate, 1000);
   
  }

4. Lời Kết

Qua bài này, kiso đã hướng dẫn các bạn tạo thành công đồng hồ treo tường. Các bạn có thể tinh chỉnh để cho đồng hồ thêm đẹp hơn như đổ bóng, làm hiệu ứng gương …

Cảm ơn các bạn, hẹn gặp lại trong bài viết sau.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tải phần đồng hồ treo tường	kiso.vn hoặc gameportable.net
Tải phần đồng hồ có thời gian thực	kiso.vn hoặc gameportable.net

CSS3

Tạo đồng hồ treo tường với HTML và CSS

1. Phần HTML

2. Phần CSS

3. Lấy thời gian hiện tại

4. Lời Kết

Bài viết liên quan

[CSF-2] Một số thiết lập CSF, LFD

[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)

Sử dụng SSH Key với Gitlab và Github

Directory traversal vulnerabilities (phần 4)

Directory traversal vulnerabilities (phần 3)

Directory traversal vulnerabilities (phần 2)

Trả lời

Thông tin chung

Danh sách dịch vụ

Dịch vụ quản trị

Hướng dẫn sử dụng