CSS3 kullanarak ok saati. CSS3 ve jQuery'de dijital saat HTML'ye saat nasıl eklenir
Bu onların ana senaryosu:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00
En üstte görüyoruz:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00
Kalın metin ve sarı ton ve oklar eklemeniz yeterlidir.
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e « 00:00:00»
Ve olan buydu:
Yani her şeyin nasıl değiştiğini kendiniz görüyorsunuz ve şimdi her şeyi kendiniz yapabilir ve stilinize uyacak şekilde güzelce ayarlayabilirsiniz. Başkalarının yapılamayacağı, çünkü Flash var, onlar burada değiller.
Şimdi Flash'taki saate ek olarak
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
Böylece hangisini en çok sevdiğinizi seçebilir ve koyabilirsiniz, çünkü bazıları bloğa kurulabilir, ancak ilk sevdikleriniz, herkesin yapabileceği esnek ve özelleştirilebilir oldukları için daha çok hoşunuza gider.
Bu, JavaScript'teki sistem saatini düz metin olarak gösteren basit bir komut dosyasıdır. İki nokta üst üste ile ayrılmış saatler, dakikalar ve saniyeler - hepsi bu.
Saat için kendi stilinizi ayarlamak için, bloğun stilini ID - #time ile tanımlamanız yeterlidir. CSS'de saat, rengi ve boyutu için kendi yazı tipinizi ayarlayabilirsiniz. Basit bir saate ihtiyacınız yoksa, ancak daha karmaşık olanlara ihtiyacınız varsa, site için Flash saatine bakın. Komut dosyası zaman verilerini nereden alıyor? Gösterilen saat tam olarak cihazda ayarlanan zamandır.
Kurulum
Sitede saati görmek istediğiniz yere aşağıdaki kodu yapıştırın. UCoz'da bu, örneğin "Sitenin Üstü" veya "Alt Kısmı" olabilir:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
00:00:00
Komut dosyası, kurduğunuz yerde hemen saatli bir metin satırı gösterecektir. Örneğin, "00:00:00"... Bu arada saniyeler, dakikalar ve saatler her zaman iki basamaklıdır, bu nedenle değerlerin değişimi sorunsuzdur.
CSS ve JavaScript kullanarak bir analog saat oluşturmayı zaten ele almıştık. Bu eğiticide, yeni standardın farklı efektler tasarlama şeklimizi nasıl değiştirdiğini görmek için CSS3 kullanarak aynı saati yapacağız. Bu eğiticinin demosu yalnızca CSS3 özelliğini destekleyen tarayıcılarda çalışacaktır. döndürmek(demo IE6'da ÇALIŞMIYOR).
CSS3 Dönüşümü: döndürme
Dönüştür: döndür - çeşitli öğeleri döndürmenize izin veren yeni bir CSS 3 özelliği. Dönüşümlerin yardımıyla, öğelerin ölçeğini de değiştirebilir, yatay ve dikey olarak bozulmalar yapabilir ve öğeleri web sayfası çevresinde hareket ettirebilirsiniz. Tüm bunlar mülk kullanılarak canlandırılabilir geçiş(farklı geçiş türleri ve süresi ile).
Sayfa öğelerini canlandırmak için aynı adımlar, bazı JavaScript kitaplıkları (örneğin, jQuery) kullanılarak gerçekleştirilebilir. Elbette, jQuery, değiştirmek için çok daha fazla CSS özelliğini canlandırabilir. geçiş... Ancak jQuery yerleşik bir CSS aracıdır, JavaScript kitaplıkları kullanılamayabilecek harici araçlardır. Her durumda, CSS3, geliştirici gelişimi için yeni umut verici yönler açar.
Grafikler
Öncelikle, saat için bir grafik arayüz oluşturmanız gerekir. Bir üssümüz ve üç okumuz olacak. Tüm hareketli parçalar Photoshop'ta 600 piksel yüksekliğinde ve 30 piksel genişliğinde dilimlenir ve dikey olarak konumlandırılır ve varsayılan olarak özellik döndürmek öğeyi merkez etrafında döndürür. Mülkiyet kullanabilir dönüşüm kaynağı dönme merkezini farklı bir noktaya ayarlamak için.
Saatin tabanı için herhangi bir görüntü kullanılabilir. Hareketli parçalar saydamlık içeren PNG görüntüleridir.
Demo kaynak kodu arşivi, tüm görüntüleri içeren bir PSD dosyası içerir.
HTML işaretlemesi
Saat düzeni basit bir sırasız listedir. Her liste öğesi hareketli bir parça içerir ve karşılık gelen bir kimliği vardır:
CSS
#clock (konum: göreli; genişlik: 600px; yükseklik: 600px; kenar boşluğu: 20px otomatik 0 otomatik; arka plan: url (clockface.jpg); liste stili: yok;) #sec, #min, #saat (konum: mutlak ; genişlik: 30px; yükseklik: 600px; üst: 0px; sol: 285px;) #sec (arka plan: url (sechand.png); z-endeksi: 3;) #min (arka plan: url (minhand.png); z -dizin: 2;) #saat (arkaplan: url (saat göstergesi.png); z-endeksi: 1;)
CSS de oldukça basit. Hareketli parçalar aynı boyutta ve başlangıç \u200b\u200bnoktasına sahip olduğundan, tekrarı önlemek için bunları birlikte beyan edebiliriz. Eleman ul göreli konumlandırma elde eder, bu da içindeki okların mutlak konumlandırmasına izin verir.
CSS3 küçük bir jQuery kodu ile uygulanacaktır.
JavaScript
- Saatlerce zamanımız var
- Her öğe için CSS stillerini (dönüş açısı) hesaplayın ve ekleyin.
- Düzenli aralıklarla CSS stillerini güncelleyin.
JQuery'nin yeni CSS3 özellikleriyle harika çalıştığı unutulmamalıdır. Ayrıca stiller dinamik olarak eklendiğinden, CSS dosyası CSS2.1 olarak doğrulanır!
Zaman alırız
Zaman, PHP kodu kullanılarak da elde edilebilir, ancak bu, sunucu zamanı olacaktır. Ve JavaScript, kullanıcının yerel saatini döndürür.
Kullanarak bilgi alacağız Tarih () ve tüm değişkenlerimizi ayarlayın. Buna göre kullanacağız GetSeconds (), GetMinutes () veya GetHours () için Tarih () sırasıyla saniye, dakika ve saati ayarlamak için:
Değişken saniye \u003d new Date (). GetSeconds ();
Yukarıdaki satırda, 0 ile 59 arasında bir sayı elde edilecek ve bir değişkene atanacaktır. saniye.
Açıyı belirle
O zaman her bir ok için dönüş açısını hesaplamanız gerekir. Saat çemberi üzerinde 60 konumu olan saniye ve dakika ibreleri için 360 dereceyi 60'a bölmemiz gerekiyor, bu da bize 6 sayısını veriyor. Yani her saniye veya dakika 6 derecelik bir dönüşe karşılık geliyor. Hesaplama sonucunu başka bir değişkende saklayacağız. Saniyeler için kod şu şekilde görünür:
Var sdegree \u003d saniye * 6;
Saatler boyunca hesaplamalar farklı olacaktır. Saat ibresi için 12 pozisyonlu kadranımız olduğu için her saat 30 derecelik bir dönüş açısına (360/12 \u003d 30) karşılık gelir. Ancak akrep ara aşamalarda olmalı, yani her dakika hareket etmelidir. Yani, 4: 30'da akrep saat 3 ile 4 arasında yarı yolda olmalıdır. İşte bunu nasıl yapıyoruz:
Değişken hdegree \u003d saat * 30 + (dakika / 2);
Yani, dönme açısına saat sayısı ile dakika sayısını 2'ye bölme değerini de ekleriz (bu bize 0,5 ila 29,5 aralığında bir değer verecektir). Böylece, saat ibresi 0 ila 30 derece (saatlik artış) bir açıyla "döndürülecektir".
Örneğin:
2 saat 40 dakika -\u003e 2 * 30 \u003d 60 derece ve 40/2 \u003d 20 derece. Toplam: 80 derece.
Dönme değeri 360 dereceden fazla olacağı için saatin öğlen 12'den sonra göstereceği varsayılabilir. Ama her şey yolunda gidiyor.
Artık CSS kurallarını eklemeye hazırız.
Tarzı belirleme
CSS3 kuralı böyle görünür döndürmek stil sayfasında:
#sec (-webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg);)
Ve jQuery kullanılarak kod şu şekilde eklenecektir:
$ ("# sn"). css (("- moz-dönüşümü": "döndür (45deg)", "-webkit-dönüşümü": "döndürme (45deg)"));
Tek sorun, "sdegree" değişkeninde ortaya çıkan açı değerini 45 derece yerine sözdizimine ayarlamaktır. Başka bir değişkende bir dize oluşturmanız gerekiyor srotate ve ikinci argümanı tamamen değiştirin. Bunun gibi:
Var srotate \u003d "rotate (" + sdegree + "deg)";
Ve jQuery kodu şöyle görünecektir:
$ ("# sn"). css (("- moz-dönüşümü": srotate, "-webkit-dönüşümü": srotate));
Hepsini bir araya koy
JQuery kodu şöyle görünür:
$ (belge) .ready (function () (setInterval (function () (var saniye \u003d yeni Tarih (). getSeconds (); var sdegree \u003d saniye * 6; var srotate \u003d "döndür (" + sdegree + "derece)" ; $ ("# sn"). css (("- moz-dönüşümü": srotate, "-webkit-dönüşümü": srotate));), 1000); setInterval (function () (var saat \u003d new Date () .getHours (); var mins \u003d new Date (). getMinutes (); var hdegree \u003d saat * 30 + (dakika / 2); var hrotate \u003d "rotate (" + hdegree + "derece)"; $ ("# saat ") .css ((" - moz-dönüşümü ": hrotate," -webkit-dönüşümü ": hrotate));), 1000); setInterval (function () (var mins \u003d new Date (). getMinutes (); var mdegree \u003d mins * 6; var mrotate \u003d "rotate (" + mdegree + "deg)"; $ ("# min"). css (("- moz-transform": mrotate, "-webkit-transform": mrotate) );), 1000);));
JavaScript işlevi kullanıyoruz setIntervalstilleri her saniye güncellemek için. Zaman değerlerini alan değişkenlerin içinde güncellenmesi gerekir. Aksi takdirde saat sayfadaki gereksiz çöplere dönüşecektir.
Sonuç
Bu ders mülkün pratik uygulamasını gösterir döndürmek tasarımla ilgili değil.
Kullanarak tarih ve saat ile elektronik bir saat yapalım jQuery ve CSS3 küçük bir animasyon için.
HTML
İşaretleme basit ve esnektir. Biz yaratırız DIV sınıfla saat, DIV sınıfla Tarihbir tarih ve saat, dakika ve saniye içeren sırasız bir liste gösterecektir.
CSS
Küçük bir animasyonlu stiller:
Konteyner (genişlik: 960px; kenar boşluğu: 0 otomatik; taşma: gizli;) .clock (genişlik: 800px; kenar boşluğu: 0 otomatik; dolgu: 30px; kenarlık: 1px katı # 333; renk: #fff;) #Date (yazı tipi- family: Arial, Helvetica, sans-serif; yazı tipi boyutu: 36px; text-align: center; text-shadow: 0 0 5px # 00c6ff;) ul (genişlik: 800px; kenar boşluğu: 0 otomatik; dolgu: 0px; liste- style: yok; text-align: center;) ul li (display: inline; font-size: 10em; text-align: center; font-family: Arial, Helvetica, sans-serif; text-shadow: 0 0 5px # 00c6ff;) #point (konum: göreli; -moz-animasyon: mymove 1s sonsuz hareket hızı; -webkit-animation: mymove 1s sonsuz hareket hızı; padding-left: 10px; padding-right: 10px;) @ -webkit-keyframes mymove ( % 0 (opaklık: 1.0; metin gölgesi: 0 0 20px # 00c6ff;)% 50 (opaklık: 0; metin gölgesi: yok;)% 100 (opaklık: 1.0; metin gölgesi: 0 0 20px # 00c6ff;) ) @ -moz-keyframes mymove (0% (opaklık: 1.0; text-shadow: 0 0 20px # 00c6ff;)% 50 (opaklık: 0; text-shadow: yok;)% 100 (opaklık: 1.0; metin-gölge : 0 0 20px # 00c6ff;))
Js
Biz bağlanıyoruz jQuery kütüphane
Ve sonra senaryomuz
- yeni tarih () - yeni bir nesne yaratır Tarih bilgisayar tarayıcısında geçerli tarih ve geçerli saatin değeri ile.
- tarih ayarla () - yöntem yerel saate göre ayın gününü (1'den 31'e kadar) ayarlar
- getDate () - yöntem, yerel saate göre belirtilen tarih için ayın gününü (1'den 31'e kadar) döndürür
- getSeconds (), getMinutes () ve getHours () - bu yöntemler geçerli zamanın saniyelerini, dakikalarını ve saatlerini tarayıcıya getirmenize izin verir.
- (saniye< 10 ? "0" : "") + seconds) - saniye değerinin başına sıfır ekler (dakika ve saat). Semboller ? ve : üçlü dahil ( üçlü) Şebeke. Bu, iki nokta üst üste işaretinden önceki değeri döndüren özel bir operatördür. bir soru (? ) sağ ( doğru) veya sonraki değer kolonkoşul yanlışsa ( yanlış).
- Fonksiyon setInterval standarttır javascript işlev, parçası değil jQuery... Kodu düzenli aralıklarla (milisaniye) birçok kez yürütür.