-
Notifications
You must be signed in to change notification settings - Fork 2
/
07-duvar-saat.htm
131 lines (90 loc) · 4.06 KB
/
07-duvar-saat.htm
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
<!DOCTYPE html>
<html>
<head>
<title>Duvar Saati</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:
- Güncel saati gösteren, duvar saati.
ÇALIŞMA MANTIĞI:
- Saatin her bir hareketli parçası için, bir resim tasarlanmıştır.
Ve güncel saat bilgisine göre, açıları değiştirilmektedir.
*/
// Saati oluşturan 4 resim nesnesi.
var imgArkaplan
var imgSaat
var imgDakika
var imgSaniye
// İlk çalışan fonksiyon.
var start = function() {
page.color = "tomato"
// Saatin arka plan resmini oluştur ve hizala.
imgArkaplan = createImage()
that.load("resimler/saat-arkaplan.png")
that.width = 200
that.height = 200
// Nesneyi, ekranın tam ortasına, hesaplayarak hizala.
that.top = (page.height - that.height) / 2
that.left = (page.width - that.width) / 2
// Saat resmini yükle ve hizala.
imgSaat = createImage()
that.load("resimler/saat-saat.png")
boyutKopyala(that, imgArkaplan)
// Dakika resmini yükle ve hizala.
imgDakika = createImage()
that.load("resimler/saat-dakika.png")
boyutKopyala(that, imgArkaplan)
// Saniye resmini yükle ve hizala.
imgSaniye = createImage()
that.load("resimler/saat-saniye.png")
boyutKopyala(that, imgArkaplan)
// Not: Resimlerin hepsi, aynı boyutta üst üste geldiğinde
// bir saati oluşturacak şekilde tasarlanmıştır.
// Ana dizinde, resimler klasörünün içindeki,
// ilgili resimleri inceleyebilirsiniz.
}
// Her saniye tekrar çalışan fonksiyon.
var loop = function() {
// BİLGİ:
// Bir daire, 360 derecedir.
// Bir saatin dairesinde,
// 12 saat, 60 dakika veya 60 saniye vardır.
// SORU:
// Saat 12'de, resmin derecesi 0 ise
// Saat 1'de resmin derecesi kaç olmalıdır?
// ÇÖZÜM:
// 360 dereceyi, 12'ye bölerek,
// Her 1 saatlik hareketi hesaplayabiliriz.
// CEVAP:
// 1 saat için 30 derece hareket etmelidir.
// Dakika ve saniye için ise cevap,
// 360 / 60 = 6 derecedir.
// Şimdi, bu bilgiler ile,
// saat resimlerinin açılarını,
// güncel saat bilgisine göre çevirelim.
imgSaniye.rotate = clock.second * 6
imgDakika.rotate = clock.minute * 6
imgSaat.rotate = clock.hour * 30
// Not: clock nesnesi, güncel zamanı verir.
}
// pYeni nesnesini, pOrnek nesnesinin konum ve boyutunda ayarla.
var boyutKopyala = function(yeniNesne, ornekNesne) {
yeniNesne.width = ornekNesne.width
yeniNesne.height = ornekNesne.height
yeniNesne.top = ornekNesne.top
yeniNesne.left = ornekNesne.left
}
/*
GELİŞTİRME ÖNERİSİ:
- Duvar saatinin altında, 12:09:00 formatında
saati dijital olarak gösteren bir bölüm eklenebilir.
- Başlangıçtaki duraksama iyileştirilebilir.
*/
</script>
</head>
<body></body>
</html>