21 NİSAN 2015, Salı

Dairesel İlerleme Yükleyici Tuval Javascript Programlama Eğitimi

Tasarımlar 420 Herkes bugün bir şey programlamak nasıl talimat gidiyoruz mutlu Dosya yükleme formları için müthiş değil birçok web sitesi gibi görsel özellikleri vardı Bugün öğrenmek kimse bu yüzden biz olacak JavaScript kullanmak olduğunu ne kalabalığın arasından sıyrılmak yardımcı olacağız Programa Dairesel yük çubukları veya dairesel yükleyiciler olarak Bentsen JavaScript gibi ilerici için Ajax ile dosya yükleme tuval öğesi kullanarak olacak Bunu işlemek için İlk bitiş ürünü CC bir göz atalım Avrupa'yı başladı yüzde 100 tüm yol etrafında çalışan ve onları o istediğini yapmak için bir yer

de bazı komut koyabilirsiniz bitince ve videonun sonuna doğru Ben size Ajax dosyası bu kravat nasıl size anlatacağım Ekranda bu hale gelebilir bu şekilde mekanizmalarını yükleyin insanlar dosyalarını yükleyerek

ve zaman tam kontrole sahip olacaksınız yapacağımızı ilk şey görsel yönleri üzerinde için başlangıç ​​olduğunu Sadece o kadar bir kampüs elemanı vardır boş bir belge ve sadece bu yüzden biz bu kampüs ben de koymak ta

“Ders Kodu: https://www.developphp.com/video/JavaScript/Circular-Progress-Loader-Canvas-JavaScript-Programming-Tutorial JavaScript ve HTML5 Canvas öğesi kullanılar...”
Adam Khoury

rzı olduğumu yaşadığını tam olarak nerede görebilirsiniz Yalnızca özniteliği oa sınır 1 piksel vermek gashed ve açık gri yapmak şimdi ben bu stil koymak tavsiye edeceğim doğrudan kampüs elemanı içinde CSS ve değil ayrıca ayarlayabilirsiniz ve CSS ile yüksekliği beni stil niteliği koyarak böylece kampları elemanın kendisi ben tavsiye etmiyorum ben sadece dersi tutmak için bu yapıyorum en iyi yaklaşım yıldırım hızlı ne yapardın CSS bu ama Belgenin en bölüm tamam en

Dairesel İlerleme Yükleyici Tuval Javascript Programlama Eğitimi Resim 1 Dairesel İlerleme Yükleyici Tuval Javascript Programlama Eğitimi Resim 2 Dairesel İlerleme Yükleyici Tuval Javascript Programlama Eğitimi Resim 3 Dairesel İlerleme Yükleyici Tuval Javascript Programlama Eğitimi Resim 4

o kılan bir göz atalım ve küçük bir kampüs şimdi var benim komut dosyası öğesi görebilirsiniz Belge doğru kampüs altında kafa kadar değil şimdi sen isimli script var ideal yapmak istersiniz Ben gösterisini ben belgenin başlığında ve biz bir göz at alırken Ajax dosya yükleme öğretici o olacak göstereceğim edeceğim komut Ben sadece atıyorum belgede de baş olduğunu Tüm koymak istiyorsanız çok altında ben alt olay bir pencere koymak zorunda değilsiniz, ancak bu başlı belgeye yapmanız gereken tüm komut bir viraj dinleyici ol

an Pencerenin yük olay için bu sadece bir simülasyon olduğunu akılda tutmak dosyanıza adapte Sizin için gidiyoruz mekanizmaları karşıya ama bu anlatacağım ve sen ilk şey yapabilirsiniz Script elemanı Bir labar değişkenleri biz gerek yok bu şekilde kurmak olduğunu Bu bar bar içine çağrılan var Bu animasyon fonksiyonları çalıştırmak için gidiyoruz çünkü işlevi animasyon tekrar ve tekrar tüm değişkenleri kurabilir eğer öyleyse bunun dışında Bu değişken CTX temsil işlevi kampüs olsun bağlam 2d çubuğu AL miktarda kısa yüklenen ve biz varsayılan 0 ile başlama ve seyahat edecek yüzde yüz tüm yol bu başlangıç ​​noktasını temsil başlangıç kampüs içinde daire üzerinde ve yüksek öğlen mükemmel bir Kuzey başlamak istedim yani 4.72 mükemmel Kuzey ya da benim adam kesin kuzey olmayabilir ama o benim için yeterince kuzey oldu yukarı doğru 00:00 pozisyonunda bu sadece yükleyici yapar Önümüzdeki iki değişken ile kampüs olan pozisyon saat 12 da başlayacak ve kampüs yüksekliği bu çubuğu daldırma için fark yüzdesi bulmaktan yapmak miktarı değişken göreli yüklendi Matematik 6.28 olduğunu pasta süreleri de ve biz bir yerde bu değeri elde nasıl göreceksiniz Ben bir daha değişken var kulüpler Ben sadece bu bar sim çağrı böylece ilerleme olayı simüle etmek: bir yoludur aralığı ayarlamak için eşit değildir Eğer açık olduğu içine tekrar tekrar bir işlemi yineleyin dertte Her 50 milisaniye olacak ateşi konum fonksiyonu ilerleme aynı bu yüzden o ve türünü fotokopi izin müzayede onu yakın parantez açmak ilerleme küme ayracı açılması ve şimdi biz yapacağımızı ilk şey küme ayracı kapatma Onların fonksiyonları Diff farkı ya da anlamaya göreceli değer aşk tutarı yüklü MassDOT pasta süreleri için veya 6.28 çünkü matematik nokta pasta javascript 3.14 temsil ikiye yüzden sadece kez 6.28 yapmak hangi biz miktarda almak tam bir daire yüklenir biz sonra 100 ve bölü biz merhaba MassDOT ile çarpın için 3.14 kat olan Altı nokta 28 yapım ve 6.28 çarpın 10 kez ve sadece düzeltmek için kullanabilirsiniz iki ondalık basamak vardır ve ben bile sanmıyorum emin olmak için Burada gerekli düzeltmek ama sadece emin olmak için yerine koymak benim Eğer kesirler kullanmak isteyebilirsiniz çünkü sayı iki ondalık basamak vardır Ertesi çizgi biz harap temizlemek için gidiyoruz Şimdi biz sadece temelde net dikdörtgen edeceksin net harap kullandığınızda kampüs silme daha başlayacak X 0 y0 olacak bütün kampüs I içinde bütün kampüse gitmek hemen hemen sadece her seferinde Poinciana bu ilerlemeyi bütün kampüse siler ishal Eğer istemediğiniz gerçekten garip görsel efektler görürsünüz do not do that var o zaman olacak için olacak şimdi bu hattı hattı zekâ set konum ilerleme çubuğu kendisi veya dairesel çörek şekli South yapacağız Dolgu stilini ayarlamak konum o zaman olacak düşünüyorum Bu renk yukarı metin içinde o küçük metin hatırlamak olacak orta Dairesel yükleyici altında o fakir ayarlayabilirsiniz renk Burada gerçek rengini ayarlamak Dairesel yükleyici kendisi ve görünüyor ki ben sadece aynı renkte yapılmış tamam Ben ortalamak için bir dizi metin arasında bir satır açık mavi kullanın Aslında şimdi bir dinamiği yapmak yolu sadece bizim metin çizmek asla koy Burada el barrio miktarı yüklü artı yüzde işareti ve bir sonraki parametre profil metin kampüse çizilmiş metin var Bunu yaşamak istediğiniz yere Eski ve neden pozisyonları ile daha sonra max böylece metin çizilmiş olacak farkında fuar ile kampüs Zaman 0,5 temelde sadece ikiye bölünür ile kampüs demektir Daha sonra iki ve bölü kampüs yüksekliğinde iki Pics getirmek için sadece eklendi aşağı biraz Bu maksimum çünkü sonra azından burada değişken kampüs koymak ile Metnin biz metin herhangi geniş olmak istemiyorum kendisi onlar metin alacak böylece kampüs içinde değişen çizildiğini İlerleme simülasyonu boyunca rulo olarak Çok sonraki satıra için biz bunun için olacak geçmiş başlamak kullanmak için gidiyoruz Dairesel yükleyici o çizmek için ve Sizi göstermek için gidiyorum Ben söndürmek kampüs boot camp eğitimi serisi ama tüm kampüste program hakkında 20 videolar gibi ve bütün bu yöntem ve özelliklerini gösterir derinlemesine gerçekten istiyorum her şeyi etrafında başınızı sarın rahatlatmak için Seni kampüs çizme kamp almak tavsiye ederim Eğitim serisi Sanırım yaratıyoruz sonraki çizgi ve hangi yay bir daire çizer ve istediğimiz Biz diff kullanıyorsanız neden ve animasyonlu daire böylece var Değişken ve başlangıç ​​değişkeni Sana göstermek sizi değilim Bu şekilde, böylece yay hakkında derinlemesine hepiniz bu parametreleri araştırma yapabilirsiniz Burada sayıları gördüğünüz gibi şu anda istiyorsun bu numaraları temsil biliyorum kampüs kitap kampı belki şu Whalen vermeyeceğim Benim tüm malzeme ve burada önemli parçaları kusturmak yay% uh başlangıç ​​değeri% uh açısı kadar ve sonra ark açısı biten oluyor o tam tamamlanana kadar hangi zaman bizim durumumuzda değişiyor olacak daire biz sadece dahaki hat yolu aslında berabere inme yöntemini batacak yay yay kadar inmeyi çekilmesi Daha sonra bir miktar yüklü artı diyecek artı bu nedenle temelde bu fonksiyonu olarak Bu işlev çalışan her 50 milisaniyede çalışır yani her 50 milisaniyede bu miktarın yüklenen değişken birer birer artan olacak sıfırdan başlar Bir yüz ulaşıncaya kadar ve sonra birer birer artırılır alıyorum tutar bu yüzden biz bir yerde bir mekanizmaya sahip olduğundan emin olmak için Bir yüz ulaşırsa değerlendirmek yapacağız biraz koymak konum koşulu eğer yüklü miktar daha büyük veya 100 eşit olup olmadığını söylemek o zaman biz bu konuda zaman aşımı temizlemek için gidiyoruz aralık temelde animasyon duruyoruz dedi ve sonra ben burada scripting ekleyin diyor küçük bir not koymak tam ilerleme o zaman çalışacaktır Bu ilerleme tamamlandığında kodunuzu koymak nerede Söylediğin kullanıcıya bir mesaj vermek yapmak istediğiniz bir şey evet o zaman, çünkü bütün tamamlandığını dosya sunucusuna yüklenir ve biz olacaksın konum ve olurdu Çok Ajax böylece herhangi bir orada olacak değil yapıyor dosya hala yükledi alacak bir şey yapmak için sayfa ihtiyacını tazeleme telecheck bir çalışma simülatörü var gebe onların bkz Şimdi gördüğünüz o küçük kampüs olduğunu doldurur Tam istediğiniz şekilde bunu herhangi bir boyut yapabilirsiniz yapmak istiyorsun yerde şimdi gerçekten sınır kenarlığı kaldırmak ancak Siz küçük kesik sınır sadece bu özellik kaldırıldı gitmesini bunu istiyorum iyi kurşun o yolu herkesin tam boyutları görebilirsiniz yerleştirilen onların kampus yüksek yüzden şimdi hepimiz çalışma var simülatör şimdi yapmanız gereken tek şey gerçekleştirmek Bunu çırpınmak için Ajax numarası gösterisi ile dosya yüklemek için öğrenmek Avebury doğru şimdi ve aynı zamanda olacak gösteri, diğer öğreticiler Bunu uzatmak yardımcı olacak bu biriyle ilgili dosya yükleme mekanizmaları için kullanmadan içine ilerici tip olayların her türlü JavaScript bej istiyorum kafası üzerinde PHP nokta com geliştirmek için Eğer biz burada JavaScript video dersler tıklayın ve Dosya yükleme ilerleme çubuğu metre öğretici Ajax PHP sonra o tıklayın ve Eğer çok yakından video izlemek ve tüm yapmanız gereken Senaryoyu alıp yere koymak şimdi bir ilerleme işleyici işlevi var İşte Eğer kampüs koyacaktım nereye olduğunu animasyon tüm işlevselliği biz yazdı ilerleme simülatör işlevi var Bu işlevsellik gitmek istiyorum, ancak ilerleme işleyicisi ve biz rulo nasıl bar miktarı o temsil edeceğini yüklenen senin için en yüzde görelim bu nedenle bu eğitimde yüzde yüklü miktara eşdeğerdir Biz böylece bugün sunan konum öğretici sen tüm yapmanız gereken bu kullanım yüzdesi Mount yerine yüklenmiş tüm bu kampüs kodu koymak ve size olacak gitmek iyi olacağım Gerçek genelge ile dosya yükleme daha bu bir biz gerçek bir ilerleme eleman html5 ilerleme kullanıyorsanız ilerleme Sadece yapar oldu üzerinde dikdörtgen doğrusal çubuk hangi Eğer bir dairesel yük çubuğunu kullanın eğer herkes kullanır Eğer gerçekten kalabalıktan ve hatta FileUpload ayrıştırıcı nokta var PHP Bütün Ajax dosya yükleme uygulaması olması için burada oturuyor ve şimdi JavaScript videoya geri dönmek için dairesel yükleyici uyum Öğreticiler Eğer kampüs programlama göreceğiz aşağı kaydırma tutmak Şimdi bu gerçekten öğrenebilirsiniz kampüs bootcamp serisi derinlemesine bunlar hakkında tüm özellikler de Java Script ile kampüs programlama için kullandığınız yöntemler Bu ders serisi derinlemesine gerçekten gerçekten gerçekten götürecek yani o zaman kendinize düşünüyorsun bu sayı temsil nedir ve ne bu parametre bu parametre ne olduğunu göstermek sizi temsil öğrenmek tüm bu gerçekten derinlemesine kampüs boot camp eğitimi serisinde bu nedenle bu şekilde kimse o gün anlamak için başarısız diyebilirim otuz beş otuz Bu neyi temsil neyi temsil bu Ben gerçekten bu serideki derinlemesine tüm parametreleri tartışmak çünkü Tamam bu yüzden hala kendi cihazlara ve tüm programlama terk ediyorum Döngüsel yükleyici uyarlamak gerekir Ajax dosya yükleme mekanizmaları ve başka bir şey bir sürü insan fark bilmek onların sunucu bir bir lokma yapmak gibi olduğunu farkında değilsiniz İnsanları izin vermek istiyorsanız, böylece dosya yüklenenler üzerine sınırı Bir ısırıkları yapmak için bitti bir dosya yüklemek veya üzerinde on megabayt veya sunucu sınırı içine gitmek zorunda ne olursa olsun senin PHP borcu herhangi bir dosya yüklemeler için: ve maksimum yükleme boyutunu değiştirmek ve maksimum yürütme süresi temelde tüm küçük bulmak istiyorum Dosya yükleme ve artış ile anlaşma direktifler varsayılan değerler vardı çünkü eğer onun PHP ölü herhangi bir dosya eğer Bir bir lokma yapmak zorundadır anlamına yükleme için maksimum Bir mp3 gibi herhangi bir herhangi bir dosya, ağaç megabayt Bitti sokması yapmak eğer gerçekten büyük fotoğraf yükleme o sınırları artırmak zorunda sunucu üzerinde başarısız olur şimdi onlar çok şeyler olduğunu sen ayarlayabilirsiniz yapabilirsiniz Böyle olacağını orada aa verici Onlar belki böyle olabilir yük bar konteyner durağan gri çörek Yük Barfield sonra yapmanız gereken tek şey kampüs temellerini öğrenmek Programlama hangi kampüs kitap kampı renkleri değiştirebilirsiniz sizin için yapacağız siz yapabilirsiniz boyutunu değiştirebilirsiniz Eğer boyutu bu metni can istediğiniz bir kampüsü herhangi bir boyut yapmak bu yüzden hemen hemen her görsel öğe ayar için açık şimdi ben bunu açıklamak zorunda olabilir Burada bu parametre bu neyi temsil ettiğini, bu değer temsil biliyorum 4.72 hangi 00:00 düz kuzeyde kadar bu yüzden biten öfke için Sadia olan sanatı seviyorum 10 artı 4.72 bölü bu şekilde açı için fark olacak her zaman 4.72 mükemmel dünya göreli olarak O gelen büyürüz ve 00:00 pozisyonu etrafında geri diğer tarafa tüm yol tam bir daire yapmak için tamam ben bu kendi yaratmak başlamak bazı beyler umut olur Diğer tüm öğreticiler ile serin dairesel yükleyiciler ben Eğer tüm bilgilere sahip geçmişte yayımlanan gerçekten gerek Eğer hayata istediğiniz herhangi bir şekilde manipüle edebilmek için Bunu herhangi bir projelere Ben kendi cihazlara sizi bırakacağım Ben güle güle sonraki zaman konuşacağım.

Açıklama

Ders Kodu: https://www.developphp.com/video/JavaScript/Circular-Progress-Loader-Canvas-JavaScript-Programming-Tutorial JavaScript ve HTML5 Canvas öğesi kullanılarak yuvarlak dairesel dosya yükleme ilerleme çubuğu animasyonlar Öğrenmek için program.

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

  • 206
    Olumlu
  • 6
    Olumsuz
  • 41
    Yorum
  • 17953
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Harvest: Greg Laurie

    Harvest: Gre

    6 HAZİRAN 2006
  • o0oCyrusViruso0o

    o0oCyrusViru

    11 Mart 2008
  • Rachel Talbott

    Rachel Talbo

    26 Ocak 2011

ANKET



Bu sayfa işinize yaradı mı?