JavaScript Ile Saat Yapımı

***şenol*** · (Son Düzenleme: 04-05-2023 Saat 22:05, Düzenleyen: şenol.)

Bu yazımızda javascript ile saat uygulaması yapacağız, son dönemlerde, güzel grafiklerle gösterişli geri sayım uygulamaları yapılmaktadır.

[Resim: 6suwjsp.png]

Kodlarımız ve satırların açıklamaları aşağıdadır:

Kod:
<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>

**babel23** · (Son Düzenleme: 03-05-2023 Saat 11:16, Düzenleyen: babel23.)

Bu paylaşımlara görsel de olsa daha iyi olur. Nasıl bir sonuç çıkacağını görmek güzel olurdu.

***Engin*** · 04-05-2023 Saat 02:00

(03-05-2023 Saat 11:06)babel23 Adlı Kullanıcıdan Alıntı: Bu paylaşımlara görsel de olsa daha iyi olur. Nasıl bir sonuç çıkacağını görmek güzel olurdu.

Bence de bu tür paylaşımlarda önizleme linki ya da görsel eklenmesi daha faydalı olur. @şenol

***şenol*** · 04-05-2023 Saat 22:05

(03-05-2023 Saat 11:06)babel23 Adlı Kullanıcıdan Alıntı: Bu paylaşımlara görsel de olsa daha iyi olur. Nasıl bir sonuç çıkacağını görmek güzel olurdu.

(04-05-2023 Saat 02:00)Engin Adlı Kullanıcıdan Alıntı:
(03-05-2023 Saat 11:06)babel23 Adlı Kullanıcıdan Alıntı: Bu paylaşımlara görsel de olsa daha iyi olur. Nasıl bir sonuç çıkacağını görmek güzel olurdu.

Bence de bu tür paylaşımlarda önizleme linki ya da görsel eklenmesi daha faydalı olur. @şenol

Görsel eklenmiştir Gülümseme

Konu Bilgileri
	KATEGORİ ADI Javascript	KONU SAHİBİ şenol
	KONUDAKİ CEVAP SAYISI 3	GÖRÜNTÜLEME SAYISI 931

Konu ile Alakalı Benzer Konular
Konular	Yazar	Yorumlar	Okunma	Son Yorum
Javascript F12 Tuşu Ve Sağ Tık Engelleme	uzman	0	472	07-02-2024 Saat 19:44 Son Yorum: uzman
Javascript Sayfa Yenileme Kodu	*şenol*	0	588	13-02-2023 Saat 23:04 Son Yorum: *şenol*
JavaScript Zayıf Yanları Nelerdir?	Mango	2	993	12-10-2021 Saat 20:37 Son Yorum: Mango
JavaScript Nedir?	*şenol*	1	885	07-10-2021 Saat 20:34 Son Yorum: uzman
JavaScript Diğer Yazılım Dillerinden Nasıl Ayrılır?	Mango	1	810	05-06-2021 Saat 16:53 Son Yorum: SteLLase