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

test php

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

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à 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

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

Xem demo RUN

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, 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 ...

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	freetuts.net hoặc gameportable.net
Tải phần đồng hồ có thời gian thực	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...