Tạo đồng hồ Analog Clock bằng Javascript và CSS

<head>
  <title>JS and css analog clock by Best Tutorials</title>
</head>
<style type="text/css" rel="stylesheet">
html {
    background: #fff url('https://i.imgur.com/264bULg.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('https://i.imgur.com/nTrKiPe.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(https://i.imgur.com/qOSj03F.png);

}
  
  .min-hand {
    background-image: url(https://i.imgur.com/DCIRlXh.png);
  }
  
  .second-hand {
    background-image: url(https://i.imgur.com/rVQqZym.png);
  
  }
  </style>
<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 type="text/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 = 10;
function initialAnalogClock(){
     clockContainer.style.visibility = 'visible';
    analogClock();
    setInterval(analogClock,delay);
}
initialAnalogClock();
</script>
</html>

Tạo đồng hồ Analog Clock bằng Javascript và CSS

0 nhận xét:

Đăng nhận xét

Liên hệ

Tạo đồng hồ Analog Clock bằng Javascript và CSS

0 nhận xét:

Đăng nhận xét