Làm đồng hồ kim bằng javascript

hôm nay tôi sẽ tạo ứng dụng hiển thị đồng hồ trên website hoặc blog. Với sự hỗ trợ từ jQuery và CSS3 animation, mà các bước thực hiện thì cực kỳ đơn giản, sẽ không khó để các bạn có thể hiểu và tùy chỉnh nâng cao cho riêng mình.

The Graphics

Đầu tiên chúng ta cần chuẩn bị các hình ảnh cho phần giao diện đồng hồ

HTML

Trước hết, chúng ta sẽ tạo định dạng html cho đồng hồ điện tử sẽ hiển thị như sau :

Trong đoạn html bên trên, thẻ div với class là ” clock ” sẽ là nơi chứa toàn bộ thời gian. Những thẻ li sẽ lần lượt hiển thị thông tin thời gian tương ứng với giờ [hours], phút [min] và giây [sec].

CSS

Bây giờ chúng ta sẽ sắp xếp và trang trí đồng hồ sao cho đẹp mắt. Trong phần này, các bạn có thể tự sáng tạo ra những kiểu hiển thị theo ý mình. Còn không thì có thể tham khảo đoạn css mà mình áp dụng trong bài viết này như sau :

#clock {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 20px auto 0 auto;
  background: url[clockface.jpg];
  list-style: none;
}

#sec, #min, #hour {
  position: absolute;
  width: 30px;
  height: 600px;
  top: 0px;
  left: 285px;
}

#sec {
  background: url[sechand.png];
  z-index: 3;
}
   
#min {
  background: url[minhand.png];
  z-index: 2;
}
   
#hour {
  background: url[hourhand.png];
  z-index: 1;
}

jQuery

Việc thiết kế và định dạng coi như đã xong, bây giờ chúng ta sẽ tiến hành kích hoạt cho đồng hồ chạy bằng jQuery.

$[function[] {
 
      setInterval[ function[] {
      var seconds = new Date[].getSeconds[];
      var sdegree = seconds * 6;
      var srotate = "rotate[" + sdegree + "deg]";
      
      $["#sec"].css[{ "transform": srotate }];
          
      }, 1000 ];
      
      setInterval[ function[] {
      var hours = new Date[].getHours[];
      var mins = new Date[].getMinutes[];
      var hdegree = hours * 30 + [mins / 2];
      var hrotate = "rotate[" + hdegree + "deg]";
      
      $["#hour"].css[{ "transform": hrotate}];
          
      }, 1000 ];

      setInterval[ function[] {
      var mins = new Date[].getMinutes[];
      var mdegree = mins * 6;
      var mrotate = "rotate[" + mdegree + "deg]";
      
      $["#min"].css[{ "transform" : mrotate }];
          
      }, 1000 ];
 
}];

Thế là xong, bây giờ các bạn có thể tự kiểm tra thành quả mà chúng ta đã làm này giờ. DEMO LINK

Qua bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc sử dụng hàm setInterval và có thể áp dụng cho những ứng dụng khác sau này. Xin cảm ơn!

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 freetuts thao tác để tạo chiếc đồng hồ bên dưới

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Phần HTML

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

  
  
  Page Title
  
  
  


  

    

    

    

    

    

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
    
  
  

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à freetuts 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 [free tuts .net]

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{
  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%;
}

8

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

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%;
}

9 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ị

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

0tứ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

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%;
}

0

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

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%;
}

1

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

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%;
}

2

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

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%;
}

3

Chú ý trong thuộc tính

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

1giá trị

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

2 đượ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

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%;
}

4

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

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%;
}

5

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

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%;
}

6

Ở 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

Xem demo RUN

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%;
}

7

4. Lời Kết

Qua bài này, freetuts đã 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 ...