basicjs-turkce/08-kronometre.htm at main · bug7a/basicjs-turkce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
    <head>

        <title>Kronometre</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        ALGORİTMA:

        - Ne kadar zaman geçtiğini ölçen bir uygulama.

        */

        // Nesneleri taşıyan değişkenler.
        var imgArkaplan
        var imgDakika
        var imgSaniye
        var btnBaslat
        var lblSayac

        // Geçen zamanın saklandığı değişkenler.
        var sayacSaniye = 0
        var sayacDakika = 0

        // İlk çalışan fonksiyon.
        var start = function() {

            page.color = "indianred"

            // Saatin arka plan resmini oluştur. Parametreler: left, top, width, height
            imgArkaplan = createImage(0, 0, 200, 200)
            that.load("resimler/saat-bos.png")
            // Nesneyi, page nesnesinin tam ortasına hizala.
            that.center()

            // Not: nesne.center() fonksiyonu, nesneyi,
            // içinde bulunduğu nesneye göre, otomatik ortalar.
            // Sadece yatay ortalama için: nesne.center("left")
            // Sadece dikey ortalama için: nesne.center("top")

            // Saat üzerindeki, sayısal bilgi.
            lblSayac = createLabel()
            that.text = "00:00"
            that.textAlign = "center"
            that.width = imgArkaplan.width
            that.left = imgArkaplan.left
            that.top = imgArkaplan.top + 135

            // Not: Sayısal bölüm, oluşturulma sırası sebebi ile,
            // saniye ve dakika çubuklarının altında kalacaktır.
            // Son oluşturulan nesne, en üstte görünür.

            // Saatin dakika çubuğu.
            imgDakika = createImage()
            that.load("resimler/saat-dakika.png")
            boyutKopyala(that, imgArkaplan)

            // Saatin saniye çubuğu.
            imgSaniye = createImage()
            that.load("resimler/saat-saniye.png")
            boyutKopyala(that, imgArkaplan)

            // Kronometre başlatma/durdurma düğmei
            btnBaslat = createButton()
            that.text = "Başlat"
            that.color = "cadetblue"
            // Nesneyi, saatin altında ortalanmış ve 25px boşluk bırakarak hizala.
            that.top = imgArkaplan.top + imgArkaplan.height + 25
            that.left = imgArkaplan.left + ((imgArkaplan.width - btnBaslat.width) / 2)
            that.onClick(baslatDurdur)

        }

        // Her saniye tekrar eden fonksiyon.
        var loop = function() {

            // Eğer başlat düğmesine basılı ise
            if (btnBaslat.text == "Durdur") {

                // Saniye değişkenini 1 arttır.
                sayacSaniye++

                // Eğer saniye değişkeni 60'a gelmiş ise
                if (sayacSaniye == 60) {
                    // Saniye değişkenini sıfırla.
                    sayacSaniye = 0
                    // Dakika değişkenini 1 arttır.
                    sayacDakika++
                }

                // Saat görünümünü güncelle.
                guncelle()

            }

        }

        // Bir nesnenin boyutlarını, verilen örnek ile aynı yapan fonksiyon.
        var boyutKopyala = function(yeniNesne, ornekNesne) {

            // yeni nesnesinin boyutlarını, ornek ile aynı yap.
            yeniNesne.width = ornekNesne.width
            yeniNesne.height = ornekNesne.height
            yeniNesne.top = ornekNesne.top
            yeniNesne.left = ornekNesne.left

        }

        // Düğmeye basıldığında çalışacak fonksiyon.
        var baslatDurdur = function() {

            // Eğer görünen düğme başlat ise
            if (btnBaslat.text == "Başlat") {
                // Düğmeyi durdur yap ve boya
                btnBaslat.text = "Durdur"
                btnBaslat.color = "tomato"

            // Eğer görünen düğme durdur ise
            } else if (btnBaslat.text == "Durdur") {
                // Düğmeyi başlat yap ve boya
                btnBaslat.text = "Başlat"
                btnBaslat.color = "cadetblue"

            }

        }

        // Saat parçalarını ve sayısal ekranı güncelleyen fonksiyon.
        var guncelle = function() {

            // Saat parçalarını güncelle.
            imgSaniye.rotate = sayacSaniye * 6
            imgDakika.rotate = sayacDakika * 6

            // Sayısal ekranı güncelle.
            lblSayac.text = sayacDakika + ":" + sayacSaniye

        }

        /*

        GELİŞTİRME ÖNERİLERİ:

        - Sıfırlama düğmesi eklenebilir.
        - Zamanın gösterildiği format 0:2, şu şekilde olmalı 00:02.
          Saniye ve dakika, her zaman iki basamaklı görünmeli.
          if (x < 10) "0" + x olarak "göster".

        */

        </script>

    </head>
    <body></body>
</html>