Sayaç(Counter) Uygulaması

 Sayaç(Counter) Uygulaması

<!DOCTYPE html>
<html>
    <head>
        <title>Puantaj</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap" rel="stylesheet">

        <style>
            * {
                margin: 30px auto;
            }
            #Kutu {
                width: 200px;
                height: 160px;
                background-color: mediumvioletred;
                color: white;
                font-family: 'Cinzel', serif;
                font-size: 100px;
                text-align: center;
                padding-top: 40px;
            }
            #Dugme {
                width:80px;
                height: 40px;
                background-color: darkolivegreen;
                color:white;
                text-align: center;
                display: block;
                border: none;
            }
        </style>
    </head>
    <body>
        <script>
            var Sayi;
           
            function Sayac() {
                Sayi = prompt("Kaçtan geriye doğru sayayım?");
                SaymaHizi = prompt("Sayma hızı nedir?");
                 
                document.getElementById("Kutu").innerHTML=Sayi;
               
                Sayici = setInterval(Say, parseInt(SaymaHizi));
            }
           
            function Say() {
               
                Sayi--
                document.getElementById("Kutu").innerHTML=Sayi;
               
                if(Sayi<=0) {
                   clearInterval(Sayici);
               }
           }
       </script>
       
        <div id="Kutu">0</div>
        <input type="button" id="Dugme" value="Sayaç" onclick="Sayac()" />
    </body>
</html>

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...