JavaScript Saat Kodu

Bu makalede, size JavaScript’te basit bir animasyonlu Dijital Saatin nasıl tasarlanacağını göstereceğim. Bir tarayıcı, istemci tarafında bir JavaScript programı yürüttüğünden, komut dosyası istemci bilgisayarının saatini alır ve görüntüler.

JavaScript kullanarak Dijital Saat veya JavaScript’te Basit Dijital Saat Oluşturma

JavaScript Kodu:


<html>
<head>
    <title>JavaScript Dijital Saat</title>
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>

    <style>
        .tabBlok
        {
            background-color:#57574f;
            border:solid 0px #FFA54F;
            border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
            max-width:200px;
            width:100%;
            overflow:hidden;
            display:block;
        }
        .dijitalSaat
        {
            vertical-align:middle;
            font-family:Orbitron;
            font-size:40px;
            font-weight:normal;
            color:#FFF;
            padding:0 10px;
        }
        .saat
        {
            vertical-align:middle; 
            font-family:Orbitron;
            font-size:20px;
            font-weight:normal;
            color:#FFF;
        }
        .zemin{
            background-color:#F3F3F3;
            max-width:220px;
            width:100%;
            margin:0 auto;
            padding:20px;
        }
    </style>
</head>

<body onload="dijitalSaat();">
    <div class="zemin">

        <table class="tabBlok" align="center" cellspacing="0" cellpadding="0" border="0">
            <tr><td class="dijitalSaat" id="dt"></td> 
                <td>
                    <table cellpadding="0" cellspacing="0" border="0">

                        <tr><td class="saat" id="dt_saat">😴</td></tr>

                        <!-- SHOWING SECONDS. -->
                        <tr><td class="saat" id="dt_saniye"></td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    // tarih oluşturma fonksiyonu
    function dijitalSaat() {
        var dt = new Date();    // DATE() ile yeni bir tarih nesnesi oluşturuldu.
        var saat = dt.getHours();
        var dakika = dt.getMinutes();
        var saniye = dt.getSeconds();

        dakika = Tik(dakika);
        saniye = Tik(saniye);

        document.getElementById('dt').innerHTML = saat + ":" + dakika;
        document.getElementById('dt_saniye').innerHTML = saniye;

        if (saat > 12) { 
            document.getElementById('dt_saat').innerHTML = '😊'; 
        }
        else { 
            document.getElementById('dc_hour').innerHTML = '😴'; 
        }

        // her 1 saniyede bir yenileme yapılıyor.
        var time
        time = setInterval('dijitalSaat()', 1000);
    }

    function Tik(tikDegeri) {
        if (tikDegeri < 10) {
            tikDegeri = "0" + tikDegeri;
        }
        return tikDegeri;
    }
</script>
</html>

<html>

<head>

<title>JavaScript Dijital Saat</title>

<style>

.tabBlok

{

background-color:#57574f;

border:solid 0px #FFA54F;

border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;

max-width:200px;

width:100%;

overflow:hidden;

display:block;

}

.dijitalSaat

{

vertical-align:middle;

font-family:Orbitron;

font-size:40px;

font-weight:normal;

color:#FFF;

padding:0 10px;

}

.saat

{

vertical-align:middle;

font-family:Orbitron;

font-size:20px;

font-weight:normal;

color:#FFF;

}

.zemin{

background-color:#F3F3F3;

max-width:220px;

width:100%;

margin:0 auto;

padding:20px;

}

</style>

</head>

<td>

</table>

</td>

</tr>

</table>

</div>

</body>

// tarih oluşturma fonksiyonu

function dijitalSaat() {

var dt = new Date(); // DATE() ile yeni bir tarih nesnesi oluşturuldu.

var saat = dt.getHours();

var dakika = dt.getMinutes();

var saniye = dt.getSeconds();

dakika = Tik(dakika);

saniye = Tik(saniye);

document.getElementById('dt').innerHTML = saat + ":" + dakika;

document.getElementById('dt_saniye').innerHTML = saniye;

if (saat > 12) {

document.getElementById('dt_saat').innerHTML = '😊';

}

else {

document.getElementById('dc_hour').innerHTML = '😴';

}

// her 1 saniyede bir yenileme yapılıyor.

var time

time = setInterval('dijitalSaat()', 1000);

}

function Tik(tikDegeri) {

if (tikDegeri < 10) {

tikDegeri = "0" + tikDegeri;

}

return tikDegeri;

}

</script>

</html>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin