26 Ocak 2012, PERŞEMBE

Html 5 Öğretici İlerleme Çubuğu İçin İlerici Javascript Olayları İşleme Veya Dosya Yüklemek

Başka bir kez daha burada merhaba herkes Adam Bu bir video ders, biz bulmak için nasıl göstermek olabilir gerçek bir yeni html5 ilerleme çubuğu JavaScript ilerici olay lotsa insanların ilerlemeyi yerleştirmek için biliyorum bar kendi sayfasında belki bir klavye ile herhangi küçük bir çocuk bunu çok az insan gerçek bu yeni HTML5 ilerleme çubuğu kravat nasıl JavaScript Şu anda biz tüm denemek ve değiştirmek için gidiyoruz bu yüzden saldırgan olay nerede Herkes yeni html5 şeyler tidies bilir Yasal tavşan deliğinden aşağı yerleştirin çekmek JavaScript olay Binayı başlamadan önce en gördüğü

nüz bitmiş ürünler bir göz atalım tam olarak hangi öğrenme olacak ve her zamanki gibi ben sizler kadar kapmak için yapmak senaryoyu tamamlamak zorunda kalacak Gerekirse her P nokta com geliştirmek ve bağlantı

videonun açıklamasında olacak böylece seçim yapmak zorunda tarayıcısında önizleme akılda tutmak Dosya gidelim çünkü burada doğru tarayıcı 2014 standart çıkış tarihi olan HTML5 için ben şimdi denedim bazı tarayıcı

“Ders Kodu: http://www.developphp.com/video/HTML/Progress-Bar-Progressive-Javascript-Events-Processing Bu ilerici olay ne olursa olsun ilerici Javascript olayları,...”
Adam Khoury

larda çalışır duyuyorum Ben gerçekten içine şimdi çalışmak için beş bloktan denenmiş Google Chrome'u yazma cevapsız Yüz aldığında bağlı ilerleme tamam yani Google Chrome'da çalıştırmak edeceğiz yüzde Biz biliyoruz biz kullanıcı izin sayfada istediğiniz bazı eleman güncelleme Bu süreç tüm yeni HTML ile yapılır tamamlandı Ben elemanı ve JavaScript ilerleme istiyorum bu parçaya bağlı en iyi eski HTML ve vücut etiketleri ile başlayalım bir satır aşağı git Ben y

Html 5 Öğretici İlerleme Çubuğu İçin İlerici Javascript Olayları İşleme Veya Dosya Yüklemek Resim 1 Html 5 Öğretici İlerleme Çubuğu İçin İlerici Javascript Olayları İşleme Veya Dosya Yüklemek Resim 2 Html 5 Öğretici İlerleme Çubuğu İçin İlerici Javascript Olayları İşleme Veya Dosya Yüklemek Resim 3 Html 5 Öğretici İlerleme Çubuğu İçin İlerici Javascript Olayları İşleme Veya Dosya Yüklemek Resim 4

eni bir ilerleme etiketi açacağım Yeni html5 ilerleme çek ve en go ahead ve içinde şimdi kapatmak izin açılış ilerleme elemanının etiketi sonra boşluk yazın Kimlik ama bar ilerleme bir adam adı ne istersen eşittir Bu süre içinde bir yerde bildirildiği gibi çıkışları ama başka bir yer bu değeri olarak adlandırılır ve o başlayacak ne olduğunu 0'a eşit olduğunu olduğunu Bu düşük sonunda ve bitiminde Biz 100 koyacaktır hangi onun max vuracaktır ve bunlar kullanıcı tanımlı değer size şekerleme istediğiniz değerleri ayarlayabil

irsiniz böylece ancak gibi yüklemek için en genel amaçları ve Eğer bu olurdu görüntü veya medya dosyalarını max 100 yolunda bu yüzden bu basın Kontrolü s ve tarayıcı içinde önizleme OKC bana bir buzdolabı ne verdikleri bakın Şimdi 50 değişiklikler değere göre çubuk Kitsap Way dolu olduğunu görürsünüz ve bu sevimli tamam yüzden bununla sıfıra geri dönelim Şimdi ne yapmak istediğinizi ben sevmiyorum çünkü artık benim çubuğu biraz yapmak olduğunu Varsayılan Lancs Eğer I ile derin bir top sevmiyorum ne kadar süre bakın love it zekâ comment tarzı aslında stil eşit ve bu kadar Colin hangi hangi biz olmak kazanmak istiyorum ne 300 ayarlayabilirsiniz için bir numara px piksel tamam şimdi en ne olsun bakalım bize uzun bir parçası C verir sen bunu istediğiniz herhangi bir boyutta olabilir ayarlayabilirsiniz görebilirsiniz Ayrıca ayarlayabilirsiniz Yükseklik sen en belki yapalım isterseniz forty four piksel en iyi intro insanların daha az bir büyük olacak tarayıcıda çalıştırmak büyük bir devi BP, satın almış Eğer 50 alacaksınız gördüğünüz gibi kenarında bir değer koymak gerekir 12 80 olarak soğuk Onlar gerçekten yaptım varsayılan boyutta olması insanların güzel size büyük bir oyun vermek Ben sadece ilerleme etiketi artık tamam benim meme bırakacağım ilerleme unsuru biz yazın gidiyoruz sonraki satıra gitmek için tüm hazır karış Bu kimliği içinde bir yayılma elemanı olacak statü kadar bu benim numarayı tutmak için kullanmak için gidiyorum unsurdur, çünkü göstermek için görsel çubuğunun yanındaki kişiye Sayfası bunun dayanmayacak sayı şimdi sadece bir değer olarak kimlik özniteliği böylece bir durum adında Durum Ben Seni bar bir numarası olacak şekilde değil, sadece hemen yanında da ilerici olayı temsil bar Alice o yayılma etiketinin yakın emin olun biz bir şey koymak gerekmez ve kalıcı yapacaksınız basit bir h1 etiketi ve içinde bu açılış etiketinin üzerinde en yakın her biri Ben ferah yazın ve kimliğini koymak için gidiyorum Son mesaj sağduyu nato yapar Onun bir javascript şeyler koymak için gidiyor ki bir şey koymak değil O ormanda yolunda bu yüzden onun bazı poppin içinde h1 etiketi altında alright javascript Ben sadece basit baş etiketinde benim javascript koyarak değilim gösteri Ben istiyorum şeyler her türlü sonra yüklenen üzerinde program yok çünkü bunun gibi ve genellikle böyle bir saldırgan olay yapıyoruz onlar bunu yapmadan önce bir tam sayfa yüklenmelidir bkz başlatılan kullanıcı olurdu şey zaten Ben bu unsurların altına benim javascript atıyorum tek nedeni bu yüzden beklemeye bir pencere nokta çalıştırmak zorunda değilsiniz Sadece Amerika Birleşik bana o adımı atlayın ama bir o hatırlamak önemlidir normal bir durum Bir kullanıcı javascript işlevi başlattı olurdu Senin benim gibi olmaz göre ilerleme ve sadece gidiş başlar demek Bir kişinin sayfaya geldiğinde sayfa yukarı yüklediğinde bir olacak değil o orada ilerleme çubuğu sadece gidiş şimdi şimdi ben gidiyorum, bir kullanıcı başlattığı etkisi var JavaScript üst özel bu ne örnek kodlu gibi hepsi yakın temelde yaptığım bu yukarı veya açıklayan başlangıç ihale çok değil kapalıdır yolu karmaşık şeyler 24 aldım bu yüzden ne yaptım açıklamak şu anda bakmak JavaScript Ben istediğim basit bir örnek değişikliği animasyon ve koymak yeteneği sadece Bu ilerleme çubuğu sıkı JavaScript ilerici olay Ben açıklamak üzereyim disfonksiyon ve bir mesaj yüzden Biraz içeride hepsi yaklaşık gerçekten setTimeout Animasyon şimdi onları büyük olasılıkla olur ilerici bir görünüm işlevselliği ediyoruz ne zaman birileri olacak Tamam yüklenenler şey şimdi söyleniyor Bana bu işlevi yaptığımız ilk şey ne oluyor göstereyim Bu fonksiyon aslında bitmeden olduğunu Fonksiyon sadece bekleyen döşeme orada oturuyor ve kaçmayacak sayfanızın yükler doğru değil sürece hangi burada bu hat da bunu söyler bunu söylemek I önce doğru aradım bir değişken oluşturmak çalıştırmak için bu işlevi soğuk miktar yüklenir ve böylece temelde tüm bu yüzden javascript yaptık tamam 20 bu kadar uzak Ben 0 $ değerinde bir miktar yüklü değişken yaptık olduğunu ve sonra benim ilerleme çubuğu simülatörü müzayede çalıştırmak içine yüklenen miktar yüklü sıfır değeri ile ve bu fonksiyon ilerleme çubuğu simülatörü görmek Burada onların seyrek bunu bir argüman olan içine geliyor vardır edilir Yüklenen miktar yüzden sadece AL için kısa yapılmış işlevi içinde bu şekilde bu erişimi vardı sayı yüzden şimdi fonksiyonu içindeki tüm soğuk et bakalım Biz yapacağımız ilk şey iki değişkenleri ilk değişken oluşturmak olduğunu isim bir bar bir sonraki durumudur ve onlar bu durumunu temsil etmektedir biliyorum sayfadaki koymak eleman burada bu bir temsil ilerleme çubuğu elemanı ve biz belgeyi diyerek o olsun got No eleman almak ve üzerinde hedef istediğiniz öğeyi tayin sayfa bu yüzden bu 10 güzel küçük Barrie alacaklarda sarılmış olsun Bizim komut dosyası içinde kolay kullanım için tam burada nasıl eğlenceli durumunu görmek için ve burada bar Kullanıyorum nerede bu hatların her biri bütün bu önemsiz koymak zorunda değilsiniz Ben sadece biraz iş koyabilirsiniz gider Biz durumu böylece tamam değişkenleri oluşturmak bu yüzden got iç HTML özelliği etkilenen ediliyor ve biz AL numaraya eşit yapıyoruz 0 olacak karşı hangi onu ve biz ona hemen yanındaki bir yüzde sembolü koymak bu yüzden burada bu durum açıklık irade euro vardı ve yüzde sembol başına içine yerleştirilen İlk eylem olarak ayarlanır yüklü miktar buraya sıfıra çünkü böylece ilk eylem olacak ve böyle bir bölünmüş ikinci şey size olacak Muhtemelen bile görmez ve aslında bu işlev döngüler Bu AL sayı böylece görmek için olsun nasıl sürekli değişiyor Bu sayı yüz bir bütün yol gider ilerici bir olay şimdi çubuk biz seksen tarafından elemanı kalkmak belge hedefliyoruz ilerleme çubuğu burada veri değeri veren değerini dökülme aslında bu sayının AL için görüntülemek Biz elli yıl numara koymak nasıl bu kadar aslında bu geri ayarlanması gerekir unutmayın 20 ancak bu UV ışın değerdir burada ve bunu ayarlayabilirsiniz javascript sadece statik bir şey olmak zorunda değildir aradığınız zaman sayfaların her an en değiştirmek için JavaScript kullanan istemek bardot değeri kaynak AL eşittir neyse AL belirli geçmişe olur Bu açık artırma yoluyla ve yaptığımız sonraki şey, biz artırmak olduğunu AL temsil sayısı böylece AL numarası üzerinde artı artı simgeleyen tarafından burada arttırılır alır Bu satır çalıştığında bu yüzden 2-1 bir araç haline gelir onun 97 bu çizgi çalıştığında bir 98 olur ve bir sonraki çizgi burada Magic benim küçük olduğu Bu değişken olarak adlandırılan günah animasyonlu komut ve ben sadece eşit simülatörü şok gibiydi adlı javascript bok zaman aşımı yöntem aslında beni bu çalışmasına izin 12 Eylül şimdi şimdi çalışıyor görürsünüz ama ne yapmak istediğinizi bu sayı milisaniye olduğunu göstermek olduğunu Ben vardı ve eğer öyleyse ben bunu üç yüz milisaniye koşuyorum O benim bir şey olacak benim küçük animasyon bakmak ne kadar hızlı böylece tarafından 1000 bu her saniye olur dedi Her saniyede bir kez O saldırgan olay artırmak için gidiyor ve bu sayı yada yada yada benim çubuğu büyür yapmak ve değiştirmek Eğer hızlı hareket etmek istiyorsanız bu yüzden 20 aksine o enayi koymak ve Shaikh uçuşunu izlemek Şimdi o bu animasyonlu setTimeout olan yolu denilen bir işlevini çağırır ilerleme çubuğu sim: Her çalıştırmak için 300 milisaniye ne olduğunu tahmin ilerleme çubuğu sim: fonksiyonudur 21 şu anda sadece üzerinde bakıyor yani içinde bulunduğumuz olduğunu kendisi Bu cep Bu ilerleme çubuğu sim: function ve burada setTimeout kullanarak kendisine getirecek durum bu ise şimdi o biraz var son şey biz kurmak şart biten dinlemek için eğer dostum tamamlama biraz agresif bir olay tamam şimdi biz biliyoruz AL olacak burada, 0 başlangıç ​​olduğunu ve tüm yol biz dinleyebilirsiniz yüz kadar olan yol çalışması ya ve yerinde olmayan değerleme kalmak için olabilir 100'e eşit AL ve biz okuma İspanyolca biliyorum ve biz bu durumu burada durup koymak güncelleme Yüzde 100 ve daha sonra bar değeri bir ayara sonuçlandırmak edebilirsiniz % 100 uh sonra biz sadece açık zaman aşımı Bizim sim setTimeout mesajı için Artık çalıştırmak ve bu sadece benim animasyon ile ilgilidir olmaz bu şekilde ister animasyon için biliyorum eğer öyleyse JavaScript gün önce benim küçük animasyon şey Aslında ben artık animasyon istemiyorum bir noktaya alır ve ben seçtim Senin için bu küçük simülasyon yapmak için bir yüz getting bu değeri kullanın Bu son şeyler çok basitçe sadece ben Aggie tarafından elemanı olsun belgeyi demek Son mesaj numarası hedef: eleman burada hangi h1 etiketi olduğunu ve iç HTML özelliği etkileyen süreci tamamlandıktan Sizin eşit olan bir değere yapmak ve o şimdi çok basit nasıl çalıştığını bok adamlar dats bana bir kez açıklayayım Tekrar Burada benim işlevi sadece basit bir ne yaptığını animasyon işlevi setTimeout kullanır ve durum yerleştirilen ben bu var, sonra kendisi görünüyor O sadece sadece benim animasyonu durdurmak belli bir noktaya alırsa Şimdi bana bu senin olur daha büyük olasılıkla ve en yaygın yinelemek izin durumlar size Shill bu kullanarak olurdu Ben kullanıcıya yüklendi edeceğiz ne kadar uva Ben var gibi Justin animasyon olmazdı ama bu JavaScript kravat ve bu bütün mesele olduğunu nasıl video ders Size göstermekti nasıl Chaplin ve chai JavaScript için agresif olaylar ne olursa olsun onlar ilerleme çubuğu almak olabilir Yeni html5 ilerleme parlamento.

Açıklama

Ders Kodu: http://www.developphp.com/video/HTML/Progress-Bar-Progressive-Javascript-Events-Processing Bu ilerici olay ne olursa olsun ilerici Javascript olayları, HTML5 ilerleme elemanı kravat öğrenin. Bizimle HTML ve HTML5 öğrenmek gel: http://www.developphp.com

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.5/10

  • 153
    Olumlu
  • 7
    Olumsuz
  • 45
    Yorum
  • 37385
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Alexander Johnson

    Alexander Jo

    26 Temmuz 2008
  • GOTO Conferences

    GOTO Confere

    3 EKİM 2011
  • Microsoft Research

    Microsoft Re

    24 EKİM 2008

ANKET



Bu sayfa işinize yaradı mı?