v2.5.2
Giriş yap

javascript ile analog saat

murat34
475 defa görüntülendi
2 
<!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.

css javascript
Cevap yaz
Cevaplar (2)
f4kor4ll
636 gün önce

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.

1
#012389
murat34
636 gün önce
// saniyeCubugu.style.rotate=`z ${saniye*6}deg`

evet bu satiri da açıklama yapınca su gibi akıyor.Teşekkürler.
css tarafında transition ve js de interval ile yapınca senkronize olamıyordu.

1
#012392