Dưới dây là cách code một đồng hồ Analog bằng Javascript và css.

 

 

1. HTML

<html>

<head>
  <title>JS and css analog clock by Best Tutorials</title>
</head>
<link type="text/css" rel="stylesheet" href="style.css" />
<body>
  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>
</body>
<script src="script.js" type="text/javascript" ></script>
</html>

2. CSS

html {
    background: #fff url('images/white-wall-living-room.jpg');
    background-size: cover;
    font-family: "helvetica neue";
    text-align: center;
    font-size: 10px;
  }
  
  body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    position: relative;
  }
  
  .clock {
    border: 2px solid black;
    background-color: rgb(255 255 255);
    box-shadow: 0px 0px 16px rgb(0 0 0 / 50%);
    visibility: hidden;
    width: 360px;
    height: 360px;
    background: url('images/oclock_bg.png');
    background-size: 100%;
    border-radius: 50%;
    top: 10%;
    right: 10%;
    position: absolute;
    padding: 2rem;
  }
  
  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .hand {
    width: 190px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 190px 14px;
    background-position: right center;
    transform-origin: 150px 10px;
    position: absolute;
    top: calc(50% - 10px);
    right: calc( 50% - 40px);
    transform: rotate(90deg);
  }
  
  .hour-hand {
    background-image: url(images/hour_oclock.png);

  }
  
  .min-hand {
    background-image: url(images/minute_oclock.png);
  }
  
  .second-hand {
    background-image: url(images/second_oclock.png);
  
  }

 

2. Javascript

const secondHand = document.querySelector(".second-hand");
const minsHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
const clockContainer =  document.querySelector(".clock");

function analogClock() {
  const now = new Date();

  const miliseconds = now.getMilliseconds();
  const seconds = now.getSeconds();
  const secondsDegrees = (seconds+(miliseconds/1000)) /  60 * 360  + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = mins / 60 * 360 + seconds / 60 * 6 + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = hour / 12 * 360 + mins / 60 * 30 + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

const delay = 1000;
function initialAnalogClock(){
     clockContainer.style.visibility = 'visible';
    analogClock();
    setInterval(analogClock,delay);
}
initialAnalogClock();

Trên đây là cách code một đồng hồ treo tường đơn giản bằng javascript và css. Ngoài ra code trên còn sử dụng hình ảnh của kim đồng hồ, hình nền. Các bạn có thể tham khảo ở link github để tải về.

Source code: https://github.com/best-tutorials/analog-clock

Demo: https://best-tutorials.github.io/analog-clock/index.html