27 EKİM 2010, ÇARŞAMBA

Saat Web Sitenize Javascript Dijital Saat Öğretici Css Özel Animasyon

Bomba ekibi merhaba herkes burada nasıl öğrenme olacak şey bitmiş ürün var sıfırdan programı Ham JavaScript ve CSS kullanarak bazı web sayfaları içine gerçek zamanlı olarak çalışan bir özel yapılmış dijital animasyon saat var web sayfalarında bunu açıkça çalıştığını burada görebilirsiniz Google Chrome'da boyunca geçiyor burada tüm büyük tarayıcılar Burada uzun bir alıyor ocaklar ve Internet Explorer böylece web üzerinde üç, en çok kullanılan tarayıcılar ve ben bütün çalışır eminim diğer en sana browser yapabilirsiniz yüzde 100 biraz yukarı tasarım kullanmasına izin bu CSS kullanarak gibi yine değişmiş de

ğişir ve ben o ishal nasıl arkasında programlama mantığı çok olmadığını size göstereceğim anlamak zor ve götürün edeceğim Eğer bir usta olacaksın, bir programlama olarak her biraz daha düşük eserleri JavaScript hiçbir zama

n parlak tüm Bütün bu soğuk mantığı benim ActionScript 3 türetilmiştir Bu sana kanıtlamak böylece dijital saat o programlama flaş çırpınmak için daha evrensel hale usta iyi bir web programlama dili yıllık Nat

“Ders Kodu: http://www.developphp.com/video/JavaScript/Digital-Clock-Tutorial-Custom-Animated-Clock Gerçek zamanlı sayfa öğeleri ile iletişim, Javascript fonksiyon...”
Adam Khoury

ional Mall tamam diyelim rock n roll gösterisi seni listesini programlamak nasıl o Yeni bir web günü Yapmamız gereken ilk şey merak etmeyin kolay adam yaratmak belgeler, böylece benim masaüstünde ben öylece çift web siteme yeni bir klasör oluşturun çağrısı yapıyorum yeni klasör içinde tıklayın notepad plus artı açmak ve ima bu tasarruf Gözat Toz-up my web sitesi olarak min im sayfa adının da çene çağrı indeksi HTML belgesinde söylemek emin olun şimdi ben

Saat Web Sitenize Javascript Dijital Saat Öğretici Css Özel Animasyon Resim 1 Saat Web Sitenize Javascript Dijital Saat Öğretici Css Özel Animasyon Resim 2 Saat Web Sitenize Javascript Dijital Saat Öğretici Css Özel Animasyon Resim 3 Saat Web Sitenize Javascript Dijital Saat Öğretici Css Özel Animasyon Resim 4

yerleştirmek için gon ediyorum başlangıçlar HTML etiketi olan bir HTML belgesi var HTML etiketinin içinde bugün baş etiket ve vücudu vardı Eğer temel bilgilere sahip organizma HTML CSS ve yol olduğunu ve HTML ve CSS ve bir web belgesinin JavaScript içinde gether yönetti Ben kuzey o her bit JavaScript anlatacağım Eğer sayfasında görüntülemek istediğiniz HTML belgesi hemen hemen her şey gider Bu vücudun içinde olduğu başlayacak almak Tüm oluşturulan etiket kadar açık yakın gerekli etiketi yaptım içinde yapacağı

z yerde olduğun yerde etiketi o olacak gösterisi kullanıcıya nerede diğer saat işte ve yoksul o tarzda kurmak gidiyor o olduğunu iddia etmek yapacağız bazı insanlar statik değeri koymak konum Bir çalışan saat tamam bu kadar kaçacak im Eğer biz sadece var görebiliyorum ne Chrome'da benziyor bakın orada oturan derin top statik zaman Biz javascript animasyonlu ölü ve stil o ruh animasyon edeceksin ve CSS Saunders div etiketini kullanarak stil biz bu kimliği vermek emin olmak istiyorum saat göstergesi eşittir Bu nerede JavaScript onun bu kimliği kullanarak yaptım iletişim edecek burada olacak eşit bir sınıf koyacağız Sadece bu saat tarzı diyelim ve bunu onun ile iletişim kurmak için kullanacağız CSS ve stil bir Neyse biz şimdi istediğiniz bir görünüm yapmak en bir stil başlayalım Bu CSS ile Baş etiketi dakika öncesinde eklemek gitmek ve stil etiketi emin biz tüm yakın hale tarzı bugün içinde Onca stil ed Saat tarzı olduğu sınıf için küme ayracı açmak ve iki kaşlı ayraçlar arasında kaşlı ayraç kadar yakın insanlar nitelikleri ve değerleri CSS ve ben bu basın Control stilini değiştirmek için nasıl size göstereceğim kaydedin ve gelen koş bu yüzden şimdi biz dijital saat için güzel bir göz görebilir Eğer henüz basit javascript hata sadece eklemek edeceksin animasyon değil görebiliyorum bunu elde etmek için ikinci gerçek zamanlı animasyon ve biz de çalıştırabilirsiniz ocaklar Firefox'ta neye benzediğini görmek Aynı şey tamam bir Internet Explorer Tamam iyi görünüyor Şimdi biz bir fikrim yok görebilir kafa etiketinde kadar iç HTML gövde ve Biz stil sınıf tanımları emin bu kadar getirmek vardı bir milletin tek bir satırda o anlaşmayı ihtiyacım yapmak şimdi sadece ama bir oda rezerve JavaScript veya bu Statik biz sadece yerine koymak burada var alır Metni batar JavaScript o kadar stil için Bugün her saniye güncelleme olacak metni vermek Bölümü ki görüntüleniyor şu biz JavaScript ile çalışırken Biz komut koymak istiyorum bazı seçenekleri Biz styling ile birlikte kafa etiketinde koyabilirsiniz onların ya da biz bu durumda vücut etiketinde doğrudan koyabilirsiniz Ben burada doğrudan benim div etiketine altına koyacağım şimdi ve bir sayfada işyerinde JavaScript koyarak size koymak zorunda komut aks ama açılış komut örneğin Bu JavaScript JavaScript ve dili metin söyledi tipi olan Sağ bunun altında biz bu komut örneğin at kapatabilirsiniz Burada kodlama başlamak içinde nerede script eg yapacak patlama bir işlev oluşturmak olduğunu şimdi bu fonksiyon biz bunu istediğimiz bir isim verin Bir çağrı zaman işlemek o yapıyor olması tam olarak ne oluyor çünkü açılan kaşlı ayraç birkaç satır bir küme ayracı kapalı indirdi ve bir fonksiyon yuva kurulumunda zaten var zaman işlemek içinde meydana gidiyor herşey yapacağız bu şekilde kurmak çünkü olacak bir kere, ikinci bir durum olduğunu Sana bu mümkün yapacağız çizgi göstereyim set timeout yöntemi kullanmak için gidiyoruz javascript o ve iki argüman alır: Eğer gerçekleşmesini istediğiniz eylem ya da komut olmanın ilk Zaman sınırına ulaşıldığında bu durumda hangi biz 1 saniye 1000 milisaniye ayarladığınız hangi bir saniye böylece her ikinci setTimeout render süresini yapacak orada tükürük girinti nasıl çalıştığını bkz yeniden çalıştırın Eğer olsaydı şimdi hemen bu sayfayı çalıştırmak için disfonksiyon kadar yangın asla render süresini Sadece senin zamanı ateş işlemek delme oraya Doğru bunu dışarı kodu nerede altında Parchin'de execute o kadar bu hat tam burada ben sadece koymak çalıştırmak nasıl Bu hat kırmızı çağırdı bu işlevin bir alıcı süresi hale getirebilir ve sonra yukarı içinde zaman fonksiyonunu hale setTimeout olacak zaman fonksiyonu işlemek yapmak olduğunu nasıl çalıştığını her saniye oluyor tutmak var bu güncelleme yapabilirsiniz bu şekilde ekran verir Sadece gerçekten bu onu ihtiyacımız yok etmesine izin JavaScript bizim için sözlerine ekledi olacak şimdi tarih nesnesine eksen olacak Burada ihtiyacımız değişkenleri almak için o yüzden yeni bir yapalım Değişken kendi veri nesnesi okulu tutmak için tutacağım bir dize olacak şimdiki zaman Zaman bitiş tarihi: biz değerleridir koparmak ama biz düşük engelleri oluşturmanız gerekir saat dakika saniye değişkenleri ilk en küçük bir değişken oluşturmak izin biz onların şimdiki zaman değişken dışarı orada saat dakika ve saniye olsun önce biz bir tane oluşturun edeceksin ampm işlevi olacak Bar DM latin ve ne kadar başladı am ısırık arıza sonraki değişken Biz saat dakika ve saniye dışarı takmayı başlamak için nereye gittiğimizi Sözde verileri nesnesinden Saat H min bu şimdiki zaman değişkeni almak hangi veri nesnesidir ve pazarlık gelen Saat yüzden yazın olsun dot saatleri çalışanları olsun dakikalar ve böylece biz sadece kopyalayabilirsiniz çok benzer olacak saniye Bu satırları yapıştırın değişkeni değiştirir ve M bu çok s Thats dakikalar değil saniyeler bu bir nedenle sadece almak değiştirmek dakika sonuncusu Bu olacak bizim için işe yarıyor yani saniyede olsun Biraz Barrie içine H olarak adlandırılan bir tasarıyı saat konur o anki dakika Değişken olarak adlandırılan am ve adında bir değişkene geçerli saniye içine Eğer biz tarihte bazı bilgilere sahip HP geliştirmek görebilirsiniz s Eğer özelliklerini görürsünüz altta javascript aşağı nesne ve Yöntemleri veri nesnesi biz kullanıyoruz görebilirsiniz dakikalar olsun olsun saniye saat olsun O biliyor sadece bu yüzden Date nesnesi it at karşılanmaktadır Saat dakika orada ikinci get get Tamam biz neredeyse biz bitti değişken en ve bizim küçük zamanlayıcı mesajı kurdunuz işte tüm yapmamız gereken zaman olacak, çünkü mantık konur Askeri zamanında yerinde ifadeleri, bazı olması gerekir olup olmadığını değerlendirmek için en saat diyelim 3 biz sıfır ve alt koymak emin olmalıyız 3 veya ikinci biz emin olmak için sahip olmaktır 0 tıklama ayrıca iki ve yanık Bir zaman askeri tarzı ne gibi numaralarına sahip olacak olacak şekilde Saat süre ile 16 Gerçekten bu yüzden o kadar bazı dönüşümleri yapmak zorunda olan 04:00 olduğunu aldığımız saat değişken getiri ise biz yoksullara açmak emin olmalıyız 16 değerleri ve biz DM 2 pm emin olun döndü Biz 4 pm çünkü dikkat edeceğiz, çünkü gemiler duyuyorum 16 100 askeri süresi 4 pm ifadeleri eğer ayda biz bu küçük programı tamam inanıyorum koşmak o yüzden burada bu mantığı bırakmanı sadece şeyler hazır eğer H değişkeni o anki saat eşit 0 o bildiğimiz için O H bir netice 12 Burada başka Mevcut eden daha büyük 12 olduğu gibi olmasını olur dedi 16 veya 18 22 Biz o sadece söylemek oldu çok basit yapmak dönüştürmek zorunda Geçerli bizim Kimin eşit sahip oldukları gerçekleşmesi böylece mevcut bizim -12 Bizim geri geliyor 16 ve askeri zamanı con o zaman sadece bizim 16 güncel hale -12 Dört yapma ve burada başka bir çizgi koymak zorunda DM değişkeni eşit hale pm çünkü bu noktada biz pm olduğunu bileceksiniz saatte daha iyi gitti var bu değerlendirme söyleyerek şimdiki bizim büyük budur Biz değerlendirmek için gidiyoruz şimdi iyi gitti olsun veya olmasın saat saniye yüzden dakikalık görmek için onlar için ne 0 ve BEŞİNCİ gerektirir 10 yaşın altındaki bir şey gibi tek haneli bir numara 10 yaşın altındaki bir şey biz rosier sıralama dijital saat görüntüler fayda var Doğru bu yüzden orada ifadesi yuvaya eğer saat içinde koyalım dakika bir tane aslında bu ilki kadar söylenir ve sonra biz kopya Diğer iki bunlar geçerli çok benzer olacak, çünkü bizim 10'dan az bizim Ekranda geçerli hale getirecek olan 0'a eşit Bu sayı bkz ne olursa olsun yukarı önünde bir sıfır koyun artı H ancak her Bu onu az 10 olması umulur sayı sıfıra sopa ve Burnham nasıl Sadece orada onların bütün küçük deyimi alayım bir satır aşağı git ama daha fazla dakika tek ve iki saniye kimse bu değişti Burada M bu H yanı sıra ve bu bir ve şimdi tüm dakika kadar hazırsınız Bu bir s bir S bu ve bir bu birini değiştirmek tüm şimdi kurmak olduğunuz bir Atty S Şimdi yapmamız gereken son şey JavaScript söylemek yere PM ve tüm bu saatler dakika ve saniye değerleri olduğunu bu şeyler Bu biz burada kurmak kabı yaptım içine kadar tüm tarz var CSS kullanarak biz zaten kurmak ve bu çizgiler çok basit olduğunu Burada bir değişken diyor koymak için gidiyoruz Değişken eşit benim saati adlı Kimlik saat ekranı ile eleman almak belge böylece hedef ID fonksiyonu ile Al elemanı kullanılarak Bu bir kimlik yukarı saat ekranı ile yaptığımız Benim saat yani çok basit bakınız insanlar sayfada hemen hemen o eleman için böylece bir sonraki satır aslında değeri batabileceğimi sayfadaki o elemanın içine yüzden benim saatini bakın ilk ateş olacak Firefox'ta fark çünkü kontroller içeriğinde iki satır koymak Saat HTML'nizde bir texter en vardı göstermez kullanılan tek kullanacağım hem satırları olmak bu bir Firefox için eşittir saat artı hangi Bu artı işareti O arada dize getiriyor şey eklemeden değil ekran için çok doğru bir sonraki saate yapacağız koymak değil Sonra hemen yanındaki kolona kolon ama diğer tarafta dakika dedikleri takdirde Yine onlara ve bir daha kolon ama saniye ed zaman sonra ben sadece tahmin alan ve daha sonra Biraz olacak ed DM Bir pm mezar duyuyorum ve bu şu anda bu çalıştırılabilir sayfa şu anda bunu Firefox'ta çalışıyor görürsünüz ama Belki Google Chrome'da Internet Explorer veya Firefox'ta çalıştırmak kadar tuttu Firefox sadece güzel şimdi çalışıyor Krom kadar gösterir bakın gerçek güzel onun çalışma içeri gelen gösterir Internet Explorer bu farley görmez biridir hiç görünmüyor sonraki satıra yani İlk satır olduğunu böylece Internet Explorer için olacak ben tüm diğer tarayıcılar metin içeriği kullanarak sanırım Burada kullanacağı vermedi içine yerleştirmek için veya HTML iç metin kullanabilirsiniz Şimdi en o kadar kontrol ve çalıştırın kaydetmek izin Internet Explorer'da ve oraya gitmek ve bunu izin olmazdı ActiveX online iseniz yerel bilgisayarınızda olduğunuzda bu sadece var böylece onlar artık sadece sen o Internet Explorer'da çalışmasını görebilirsiniz krom çalıştırın sertleşebilir koşmak onu içinde Firefox iyi görünümlü şimdi, bir araya getirdik şimdi burada var bu belgenin bir göz atalım her şey şimdi saati ile tamamladığınızda bitti ve bu da anlamak çok zor değil tüm kod çok değildi yani orada tamam bu bir dijital saat oluşturabilirsiniz nasıl go javascript ham JavaScript ve CSS kullanarak ve tüm tarayıcılarda çalışır var bu JavaScript öğretici beğeneceğinizi umuyoruz belki şimdi nasıl değişkenleri içine biraz daha fazla anlayış var nasıl bu işin böyle bir değerleme Zus ve şeyler mantık erişim özellikleri ve yöntemleri belli nesneler o JavaScript için kullanılabilir olması ve bunun gibi şeyler size bir sonraki ders görürsünüz.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Digital-Clock-Tutorial-Custom-Animated-Clock Gerçek zamanlı sayfa öğeleri ile iletişim, Javascript fonksiyonları, değişkenler, Date nesnesinin, bir ilmekli zamanlayıcı ile çalışarak bazı mükemmel Javascript temellerini öğrenin ve tüm büyük tarayıcı yazılımı ve akıllı telefon üzerinde çalışacak özel animasyonlu dijital saat oluşturmak için daha fazla tarayıcılar.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.6/10

  • 206
    Olumlu
  • 7
    Olumsuz
  • 84
    Yorum
  • 43894
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Matus Slovak

    Matus Slovak

    5 Temmuz 2007
  • MrRandomSong

    MrRandomSong

    29 Kasım 2009
  • Tomas N

    Tomas N

    14 Kasım 2010

ANKET



Bu sayfa işinize yaradı mı?