javascript ile analog saat | Cevap #12389

<!DOCTYPE html>
<html lang="tr">
<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>
    <style>
        *{
            box-sizing: border-box;
        }
        .analog-saat{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background:rgb(25, 3, 125);
            width: 320px;
            height: 320px;
            padding: 0;
            margin: 0;
            border: 20px solid rgb(90, 90,90);
            border-radius:  50%;
        }
        span{
            position: absolute;
            inset: 20px;
            text-align: center;
            transform: rotate(calc(30deg * var(--i)));
            /* border: 5px solid white; */

        }
        span > p {
            font-weight: 400;
            font-size: 18px;
            color: white;
            margin: 0;
            padding: 0;
            transform:  rotate(calc(-30deg * var(--i)));
        }
        hr{
            position: absolute;
            border: 0;
            outline: 0;
            margin: 0;
            padding: 0;
            transform-origin: bottom ;
            border-radius: 25%;
        }
        .saat{
            width: 7px;
            height: 60px;
            background-color: white;  
            /* border: 1px solid lime;      */
            margin-bottom: 60px;   
            
        }
        .dakika{
            width: 5px;
            height: 80px;
            background-color: white;
            margin-bottom: 80px;
        }

        .saniye{
            width: 2px;
            height: 130px;
            background-color: red;
            margin-bottom: 130px;
            z-index: 99;
        }
        .orta{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            /* margin-bottom: 20px; */
            background-color: goldenrod;
            z-index: 99;
        }
       
       
    </style>
</head>
<body>
    <div class="analog-saat">
       <span style="--i:1;"><p>1</p> </span>
       <span style="--i:2;"><p>2</p> </span>
       <span style="--i:3;"><p>3</p> </span>
       <span style="--i:4;"><p>4</p> </span>
       <span style="--i:5;"><p>5</p> </span>
       <span style="--i:6;"><p>6</p> </span>
       <span style="--i:7;"><p>7</p> </span>
       <span style="--i:8;"><p>8</p> </span>
       <span style="--i:9;"><p>9</p> </span>
       <span style="--i:10;"><p>10</p> </span>
       <span style="--i:11;"><p>11</p> </span>
       <span style="--i:12;"><p>12</p> </span>
      
       <hr class="saat">
       <hr class="dakika">
       <hr class="saniye">

       <div class="orta"></div>
    </div>

    <script>

        const saatCubugu = document.querySelector('.saat')
        const dakikaCubugu = document.querySelector('.dakika')
        const saniyeCubugu = document.querySelector('.saniye')
        const interval= setInterval( sg,1000)
        
        
        function sg (){
        
        let zaman = new Date()
        let saat=zaman.getHours()
        let dakika=zaman.getMinutes()
        let saniye=zaman.getSeconds()
        saatCubugu.style.rotate=`z ${saat*30}deg`
        dakikaCubugu.style.rotate=`z ${dakika*6}deg`
        saniyeCubugu.style.rotate=`z ${saniye*6}deg`
        }
             
    </script>
</body>
</html>

saniye çubuğunu hiç duraksamadan akıp gidecek şekilde nasıl gösterebilirim.
transition la denedim olmuyor.

Saniye çubuğunun akıcı bir şekilde ilerlemesi için CSS'te "transition" yerine "animation" kullanabilirsiniz. Saniye çubuğunu kendi başına döndürmek için de bir keyframe animasyonu kullanabilirsiniz.

Örnek CSS kodları:

.saniye {
  width: 2px;
  height: 130px;
  background-color: red;
  margin-bottom: 130px;
  z-index: 99;
  animation: saniyeDondur 60s linear infinite; /* saniye çubuğu animasyonu */
}

@keyframes saniyeDondur {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Bu kodlar, saniye çubuğunu 60 saniyede bir tam tur atacak şekilde döndürür. Bu şekilde saniye çubuğu sürekli olarak akıcı bir şekilde hareket edecektir. Ayrıca, saniye çubuğunun z-index değerini yükselterek, diğer çubukların üzerinde yer almasını sağlayabilirsiniz.