Analog saat uygulamasında akrebi istediğim gibi oturtturamadım

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analog Saat</title>
<link rel="stylesheet" href="app.css" />
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .clock {
    position: relative;
    background-image: url("https://cssanimation.rocks/images/posts/clocks/ios_clock.svg");
    background-repeat: no-repeat;
    height: 140rem;
    width: 150rem;
    border: 5px solid rgb(61, 37, 37, 0.3);
    border-radius: 50%;
    background-position: center;
    background-size: 85%;
  }
  .secs {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40rem;
    width: 0.3rem;
    background-color: tomato;
    transform: translateX(-50%);
    transform-origin: 25% 0;
  }
  .mins {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30rem;
    width: 1.3rem;
    background-color: black;
    transform: translateX(-50%);
    border-radius: 20px;
    transform-origin: 25% 0;
  }
  .hours {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20rem;
    width: 2.3rem;
    background-color: black;
    transform: translateX(-50%);
    border-radius: 20px;
    transform-origin: 25% 0;
  }
  .dot {
    position: absolute;
    background-color: rgb(0, 0, 0);
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }
</style>

</head>
<body>

<div class="clock">
  <div class="secs"></div>
  <div class="mins"></div>
  <div class="hours"></div>
  <div class="dot"></div>
</div>
<script>
  const secs = document.querySelector(".secs");
  const hours = document.querySelector(".hours");
  const min = document.querySelector(".mins");

  function tiktak() {
    let hour = new Date().getHours();
    let minute = new Date().getMinutes();
    let second = new Date().getSeconds();

    secs.style.transform = `rotate(${180 + second * 6}deg)`;
    min.style.transform = `rotate(${180 + minute * 6}deg)`;
    hours.style.transform = `rotate(${180 + hour * 30}deg)`;
    console.log({ second, minute, second });
  }
  setInterval(tiktak, 1000);
</script>
<script src="app.js"></script>

</body>
</html>

Analog saat uygulamasında akrebi istediğim gibi oturtturamadım

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (2)