Yukarıda videosu izleyebileceğiniz bu örnek web geliştirmeye yeni başlayanlar için güzel bir pratik olacaktır. Örneğin kodlarına buradan erişebilirsiniz.
Her zaman olduğu gibi HTML etiketleri ile başlıyoruz. frame sınıflı bir div ile bütün diğer etiketleri sarıyoruz. Bu div‘in içine üç göstergemiz için stick sınıflı ve göstergeyi belirten minute hour ve second sınıflı elementler ekliyoruz. Ayrıca saat sayılarını göstermek için line-wrapper ve içine 12 tane line sınıflı element ekliyoruz.
HTML sayfamız hazır. Stil kodlarını açıklamak gerekirse, frame için eşit genişlik ve yükseklik veriyoruz böylece border-radius ile düzgün bir çember elde edebilelim. Ayrıca position:relative stilini de vermemiz gerek çünkü altındaki elementlerin hepsi absolute pozisyonlanacak.
stick sınıfı üç gösterge için ortak sınıf. bottom:150px ile dikeyde ortalıyoruz, diğer değerler de yatayda ortalamamızı sağlıyor. transform-origin olarak alt-orta veriyoruz çünkü dönme hareketini transform stilini kullanarak yapacağız ve elementin alt ucu sabit kalarak dönmesini istiyoruz.
Yalnız saniye göstergesi için durum farklı, gerçek analog saatlerde saniye göstergesinin merkeze bağlandığı yerden sonra uzayan kuyruğunu da işe katmak için, second sınıfına en altın biraz daha yukarısını dönme merkezi yapıyoruz. bottom değerini de buna uygun veriyoruz. Ayrıca görsel güzellik için second::before ile saatin merkezine yuvarlak bir element getirerek dönme merkezini kapatıyoruz. minute ve hour sınıflarına da uygun stilleri veriyoruz.
line sınıflı elementler sayıları gösteren siyah çubuklar olacak, line::after ise sayıları gösterecek. Burada nth-child özelliğini kullarak her bir çizgi için özel dönme değeri ve sayı verebiliyoruz.
Javascript dosyamıza geçersek, burada clock isimli bir değişkene kendini çağıran bir fonksiyon atıyoruz. Böylece saat için kullanacağımız değişkenler global scope’ta erişilemez olacak hem de biz global scope’taki bir değişkeni bozmamış olacağız. (bkz: encapsulation). Üç göstergemizi de document.querySelector ile birer değişkene atıyoruz. Saniye, dakika ve saat için dönme derecelerini tuttuğumuz birer değişken oluşturuyoruz. Her saniye ve dakika göstergesini 6 derece döndürecek, saat göstergesi ise her bir saat için 30 derece artı dakika derecesine göre 0-30 derece arası bir küsurat alacak.
rotate adında bir fonksiyon ile elementi ve derece değeri parametre olarak verip döndürme işlemini yaptırıyoruz.
Her saniye çalıştırılması için setInterval kullandığımız tick fonksiyonu ise oluşturduğumuz derece değişkenlerini güncelleyerek tekrar rotate fonksiyonunu çağırıyoruz.
Bir cevap yazın