CSS3 ve jQuery'de dijital saat. CSS3 Clock html css kullanarak ok saati

Küçük bir animasyon için jQuery ve CSS3 kullanarak tarih ve saati olan bir dijital saat yapalım.

İşaretleme basit ve esnektir. Clock sınıfına sahip bir DIV, tarihi gösterecek Date sınıfına sahip bir DIV ve saat, dakika ve saniye içeren sırasız bir liste oluşturuyoruz.

Biraz animasyonlu stiller:

Konteyner (genişlik: 960 piksel; kenar boşluğu: 0 otomatik; taşma: gizli;) .clock (genişlik:800 piksel; kenar boşluğu:0 otomatik; dolgu:30 piksel; kenarlık:1 piksel katı #333; renk:#fff; ) #Date ( yazı tipi- aile: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul (genişlik:800px; kenar boşluğu:0 otomatik; dolgu:0px; liste- stil: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 ( position:relative; -moz-animation:mymove 1s sonsuz hareket hızı; -webkit-animation:mymove 1s sonsuz kolaylık; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( %0 (opacity:1.0; text-shadow:0 0 20px #00c6ff;) %50 (opacity:0; text-shadow:none; ) %100 (opacity:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (opacity:1.0; text-shadow:0 0 20px #00c6ff;) %50 (opacity:0; text-shadow:none; ) %100 (opacity:1.0; text-shadow :0 0 20px #00c6ff; ) )

jQuery kütüphanesi dahil

Ve sonra betiğimiz $(document).ready(function() ( // Dizide haftanın aylarının ve günlerinin adlarını içeren iki değişken oluşturun var monthNames = [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ]; var dayNames= ["Pazar","Pazartesi","Pazartesi"," Salı","Çarşamba" ,"Perşembe","Friday","Cumartesi"] // newDate() nesnesi yarat var newDate = new Date(); // Date nesnesinden geçerli tarihi çıkart newDate.setDate(newDate .getDate()); // Çıkış günü, tarih, ay ve yıl $("#Date").html(dayNames + " " + newDate.getDate() + " " + MonthNames + " " + newDate.getFullYear() ); setInterval(function() ( / / Bir newDate() nesnesi oluşturun ve geçerli zamanın saniyelerini alın var saniye = new Date().getSeconds(); // Saniye değerine bir sıfır ekleyin $("# sn").html((saniye< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });

• new Date() - bilgisayarın tarayıcısında geçerli tarih ve geçerli saat değeriyle yeni bir Date nesnesi oluşturur.
• setDate() - yöntem, ayın gününü (1'den 31'e kadar), yerel saati ayarlar
• getDate() - yöntem, belirtilen tarih için yerel saate göre ayın gününü (1'den 31'e kadar) döndürür
• getSeconds(), getMinutes() ve getHours() - bu yöntemler, tarayıcıda o anki saatin saniye, dakika ve saatlerini almanızı sağlar.
• (saniye< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• setInterval işlevi, jQuery'nin parçası olmayan standart bir JavaScript işlevidir. Kodu düzenli aralıklarla (milisaniye) birçok kez yürütür.

Bu onların ana senaryosu:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

setInterval(işlev()(
tarih = yeni Tarih(),
h = tarih.getHours(),
m = tarih.getMinutes(),
s = tarih.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
Document.getElementById("zaman").innerHTML = h + ":" + m + ":" + s;
}, 1000);

En üstte şunu görüyoruz:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

Sadece kalın metin ve sarı renk tonu ve oklar ekleyin.

200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"

Ve işte olanlar:

Böylece her şeyin nasıl değiştiğini kendiniz görebilirsiniz ve artık her şeyi kendiniz yapabilir ve stilinize uyacak şekilde güzelce ayarlayabilirsiniz. Flash gittiğinden beri başkalarının yapamayacağı şey, onların burada olmaması.

Şimdi Flash'ta ek saatler

200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">

Böylece en çok hangisini beğendiğinizi seçip yerleştirebilirsiniz, çünkü bazıları bloğa kurulabilir, ancak esnek ve özelleştirilebilir olduklarından, herkesin yapabileceği şekilde ilk olanları daha çok seversiniz.

Bu, sistem saatini JavaScript'te düz metin olarak gösteren basit bir komut dosyasıdır. İki nokta üst üste ile ayrılmış saat, dakika ve saniye - hepsi bu.

Saat için kendi stilinizi ayarlamak için, bloğun stilini ID – #time ile tanımlamanız yeterlidir. CSS'de saatin yazı tipini, rengini ve boyutunu ayarlayabilirsiniz. Basit bir saate değil, daha karmaşık saatlere ihtiyacınız varsa, site için Flash saatine bakın. Komut dosyası zaman verilerini nereden alıyor? Görüntülenen saat tam olarak cihazda ayarlanan saattir.

Sitede saati görmek istediğiniz yere aşağıdaki kodu yapıştırın. uCoz'da bu, örneğin "Sitenin Üstü" veya "Sitenin Altı" olabilir:

200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00

setInterval(işlev()(
tarih = yeni Tarih(),
h = tarih.getHours(),
m = tarih.getMinutes(),
s = tarih.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
Document.getElementById("zaman").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Komut dosyası, onu kurduğunuz yerde hemen saatli bir metin satırı gösterecektir. Örneğin, "00:00:00". Bu arada saniyeler, dakikalar ve saatler her zaman çift hanelidir, bu nedenle değerleri değiştirmek sorunsuzdur.

CSS ve JavaScript kullanarak bir analog saatin nasıl oluşturulacağını zaten ele aldık. Bu eğitimde, yeni standardın çeşitli efektler geliştirme yaklaşımını nasıl değiştirdiğini görmek için CSS3 kullanarak aynı saati yapacağız. Bu eğitimin demosu, yalnızca CSS3 özelliğini destekleyen tarayıcılarda çalışacaktır. döndür(IE6'da demo ÇALIŞMIYOR).

Dönüştür:döndürçeşitli öğeleri döndürmenize izin veren CSS 3'teki yeni bir özelliktir. Dönüşümlerin yardımıyla, öğelerin ölçeğini değiştirebilir, yatay ve dikey olarak bozulmalar ekleyebilir ve öğeleri web sayfasında hareket ettirebilirsiniz. Tüm bunlar özellik kullanılarak canlandırılabilir. geçiş(farklı geçiş türleri ve süreleri ile).

Sayfa öğelerini canlandırmak için aynı eylemler, bazı JavaScript kitaplıkları (örneğin, jQuery) kullanılarak gerçekleştirilebilir. Tabii ki, jQuery ile olduğundan çok daha fazla CSS özelliğine animasyon uygulayabilirsiniz. geçiş. Ancak jQuery, yerleşik bir CSS aracıdır, JavaScript kitaplıkları, mevcut olan veya olmayan harici araçlardır. Her durumda, CSS3, geliştirici gelişimi için umut verici yeni yönler açar.

İlk önce 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 600px yüksekliğinde ve 30px genişliğinde olacak şekilde dilimlenir ve dikey olarak konumlandırılır ve default özelliği şu şekildedir: döndür elemanı merkez etrafında döndürür. özelliği kullanabilirsiniz transform-menşei Dönme merkezini başka bir noktaya ayarlamak için.

Saati temel almak için herhangi bir görüntü kullanılabilir. Hareketli parçalar şeffaf PNG görüntüleridir.

Demo kaynak arşivi, tüm görüntüleri içeren bir PSD dosyası içerir.

Saat işaretlemesi, basit bir sıralanmamış listedir. Her liste öğesi, hareketli bir parça içerir ve buna karşılık gelen bir kimliğe sahiptir:

#saat ( konum: göreli; genişlik: 600 piksel; yükseklik: 600 piksel; kenar boşluğu: 20 piksel otomatik 0 otomatik; arka plan: url(clockface.jpg); liste stili: yok; ) #sn, #dk, #saat ( konum: mutlak ; genişlik: 30 piksel; yükseklik: 600 piksel; üst: 0 piksel; sol: 285 piksel; ) #sec ( arka plan: url(sechand.png); z-index: 3; ) #min ( arka plan: url(minhand.png); z -index: 2; ) #saat ( arka plan: url(hourhand.png); z-index: 1; )

CSS de oldukça basittir. Hareketli parçalar aynı boyutlara ve başlangıç ​​noktalarına sahip olduğu için tekrarı önlemek için birlikte beyan edebiliriz. eleman Ul içindeki okların mutlak konumlandırılmasına izin veren göreli konumlandırmayı alır.

CSS3 küçük bir jQuery kodu ile uygulanacaktır.

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ı PHP kodunu kullanarak da alabilirsiniz, ancak bu sunucu zamanı olacaktır. Ve JavaScript, kullanıcının yerel saatini döndürür.

aracılığıyla bilgi alacağız. Tarih() ve tüm değişkenlerimizi ayarlayın. ona göre kullanacağız GetSeconds(), GetMinutes() veya GetHours()İçin Tarih() sırasıyla saniye, dakika ve saati ayarlamak için:

var saniye = new Date().getSeconds();

Yukarıdaki satırda 0 ile 59 arasında bir sayı elde edilecek ve bir değişkene atanacaktır. saniye.

Ardından, her ok için dönüş açısını hesaplamanız gerekir. Saat çemberinde 60 konumu olan saniye ve yelkovan için 360 dereceyi 60'a bölmemiz gerekiyor ki bu da bize 6 sayısını verecektir. Yani her saniye veya dakika 6 derecelik bir dönüşe karşılık gelir. Hesaplamaların sonucunu başka bir değişkende saklayacağız. Saniyeler içinde kod şöyle görünür:

Varsdegree = saniye * 6;

Saatlerce, hesaplamalar farklı olacaktır. Akrep için 12 konumlu bir kadranımız olduğundan, her saat 30 derecelik bir dönüş açısına karşılık gelir (360/12=30). Ancak akrep de ara durumda olmalı, yani her dakika hareket etmelidir. Yani 4:30'da akrep saat 3 ile 4 arasında olmalıdır. İşte bunu nasıl yapacağımız:

Varhdegree = saat * 30 + (dak / 2);

Yani saat sayısına göre dönüş açısına dakika sayısını 2'ye bölme değerini de ekliyoruz (bu bize 0,5 ile 29,5 arasında bir değer verecektir). Böylece, akrep 0 ila 30 derece (saat artışı) arasında bir açıyla "dönecektir".

Örneğin:

2 saat 40 dakika -> 2*30 = 60 derece ve 40/2 = 20 derece. Toplam: 80 derece.

Dönme değeri 360 dereceden fazla olacağından saatin 12'den sonra göstereceği varsayılabilir. Ama her şey harika çalışıyor.

Artık hepimiz CSS kurallarını eklemeye hazırız.

Bir CSS3 kuralı böyle görünür döndür stil sayfasında:

#sn ( -webkit-transform: döndürme(45deg); -moz-transform: döndürme(45deg); )

Ve işte kodun jQuery kullanılarak nasıl ekleneceği:

$("#sec").css(("-moz-transform" : "döndür(45 derece)", "-webkit-transform" : "döndür(45 derece)"));

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 bağımsız değişkeni tamamen değiştirin. Bunun gibi:

Var srotate = "döndür(" + derece + "derece)";

Ve jQuery kodu şöyle görünecek:

$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));

JQuery kodu şöyle görünecektir:

$(document).ready(function() ( setInterval(function() ( var saniye = new Date().getSeconds(); var sdegree = saniye * 6; var srotate = "döndür(" + sdegree + "derece)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = saat * 30 + (dk / 2); var hrotate = "döndür(" + hdegree + "derece)"; $("#saat) ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = dakika * 6; var mrotate = "döndür(" + mdegree + "derece)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));

JavaScript işlevini kullanıyoruz setInterval stilleri her saniye güncellemek için. İçinde zaman değerleri alan değişkenler güncellenmelidir. Aksi takdirde, saat sayfada işe yaramaz bir çöp haline gelecektir.

Bu ders özelliğin pratik uygulamasını gösterir. döndür tasarımla alakası yok