1. Pendahuluan
Saya selalu sangat menyukai Win8 menunggu bilah Progress Progress yang cepat. Ketika Win8 pertama kali keluar, rasanya sangat luar biasa! Saya tidak tahu saat itu dan tidak mempelajarinya. Setelah mencari informasi secara online baru -baru ini, saya akhirnya mendapatkannya! Mari kita pergi ke demo terlebih dahulu dan pamerkan wajah jelek Anda! Untuk pratinjau, silakan lihat: Win8 Progress Bar.
2. Pendahuluan singkat
Menulis JavaScript asli, Anda perlu memahami bahwa JS didasarkan pada pemrograman berorientasi objek dan perhitungan koordinat melingkar!
Prinsip Implementasi: Abstrak Setiap titik menjadi objek (tipe ProgressBarwin8), simpan setiap objek titik dalam array (ProgressArray), tunda eksekusi metode run dari setiap objek DOT. Sedangkan untuk berjalan lebih cepat dan lebih cepat, itu dicapai dengan mengubah penundaan timer milidetik.
Salinan kode adalah sebagai berikut:
// Tentukan ukuran koordinat elemen X dan pusat X, dan atur waktu tunda timer
if (this.position.left <this.fixed.left) {
this.delay += .5;
} kalau tidak {
this.delay -= .5;
}
Lebih baik menggunakan kode sumber! Kemampuan ekspresi benar -benar tidak terlalu bagus (komentar dalam kode lebih rinci, dan Anda akan melihat lebih jelas).
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<title> Imitasi Win8 Menunggu Bar Kemajuan </iteme>
<tyle>
tubuh {
Margin: 0;
Padding: 0;
Latar Belakang: Hijau
}
</tyle>
</head>
<body>
<script>
// ********* Kondisi persiapan *********
// Formula Konversi Sudut Radi: Radius = Math.pi* sudut/180; Fungsi seperti math.sin (), math.cos () dalam JS dihitung berdasarkan radian
// Rumus Perhitungan untuk Koordinat Sumbu X dari Lingkaran: Math.cos (Math.pi * Angle/180) * RADIUS + Center X-AXIS Koordinat dari sumbu x
// Formula Perhitungan untuk Koordinat Y-Axis Lingkaran: Math.sin (Math.pi * Angle/180) * Radius + Koordinat Sumbu Y Lingkaran
// ********* Kondisi persiapan *********
// Kelas Elemen Dot (tidak ada konsep kelas di JS, hanya disimulasikan di sini)
fungsi progressBarwin8 () {
// koordinat pusat
this.fixed = {
Kiri: 0,
Atas: 0
};
// Koordinat Elemen Tag HTML
this.position = {
Kiri: 0,
Atas: 0
};
this.radius = 70; // Radius lingkaran
this.angle = 270; // sudut, default 270
this.delay = 30; // pengatur waktu menunda milidetik
this.timer = null; // Objek Waktu Pengatur Waktu
this.dom = null; // elemen tag html
// gaya elemen tag html, posisi perlu diatur ke absolute
this.style = {
Posisi: "Mutlak",
Lebar: "10px",
Tinggi: "10px",
Latar belakang: "#fff",
"Border-Radius": "5px"
};
}
// Setiap fungsi dalam JS memiliki atribut objek prototipe, dan setiap instance dapat diakses
ProgressBarwin8.prototype = {
// Metode jalankan
run: function () {
if (this.timer) {
ClearTimeout (this.timer);
}
// Atur koordinat elemen tag HTML, yaitu, menghitung koordinat poin x dan y sumbu pada lingkaran
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.angle / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// Ubah sudut
this.angle ++;
// Tentukan ukuran koordinat elemen X dan pusat X, dan atur waktu tunda timer
if (this.position.left <this.fixed.left) {
this.delay += .5;
} kalau tidak {
this.delay -= .5;
}
var scope = this;
// pengatur waktu, melingkar untuk memanggil metode lari, rasanya agak rekursif
this.timer = setTimeout (function () {
// Panggilan fungsi di JS ini menunjuk ke penelepon, dan saat ini jendela
scope.run ();
}, this.delay);
},
// Pengaturan awal elemen tag HTML
DefaultSetting: function () {
// Buat elemen rentang
this.dom = document.createelement ("span");
// Atur gaya elemen span, traversal objek di JS adalah atribut
untuk (properti var di this.style) {
// Metode objek dalam JS dapat digunakan. operator, atau melalui pasangan nilai kunci
this.dom.style [properti] = this.style [properti];
}
// Lebar area tampilan dokumen di jendela bagian dalam bagian dalam tidak termasuk perbatasan dan bilah gulir. Properti ini dapat dibaca dan dapat ditulis.
// Atur koordinat sumbu x dan y dari pusat lingkaran, area visual saat ini adalah yang umum, yaitu titik tengah
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
// Atur koordinat awal elemen rentang
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.angle / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// Tambahkan tag rentang ke documet
document.body.appendchild (this.dom);
// Kembalikan objek saat ini
kembalikan ini;
}
};
// Jika Anda tidak mengerti, komentar kode berikut dan uji operasi titik terlebih dahulu
// progressBarwin8 baru (). DefaultSetting (). run ();
var progressArray = [], // digunakan untuk menyimpan setiap array objek elemen titik. Ukuran array dalam JS adalah variabel, mirip dengan koleksi daftar
Temparray = [], // Digunakan untuk menyimpan setiap objek yang dilemparkan oleh ProgresArray. Setelah ukuran jendela diubah, setel ulang koordinat tengah dari masing -masing objek.
timer = 200; // timer untuk menjalankan metode menjalankan objek elemen setiap milidetik
// Buat Objek Elemen Dot dan simpan dalam array, dan buat 5 objek di sini
untuk (var i = 0; i <5; ++ i) {
ProgressArray.push (progressBarwin8 baru (). DefaultSetting ());
}
// Perluas array setiap metode, sebagian besar lambdas di C# diimplementasikan dengan cara ini
Array.prototype.each = function (fn) {
untuk (var i = 0, len = this.length; i <len;) {
// Ubah ruang lingkup ini dalam fungsi fn melalui panggilan (objek, arg1, arg2, ...)/apply (objek, [arg1, arg2, ...]) metode, sehingga dapat digunakan untuk warisan
fn.call (ini [i ++], argumen); // atau: fn.Apply (ini [i ++], argumen)
}
};
// Acara Ukuran Ukuran Jendela, Atur Ulang Koordinat Pusat dari Setiap Objek Elemen
window.onresize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
});
};
// Berapa milidetik yang digunakan untuk menjalankan metode pengumpulan objek elemen dari koleksi array
timer = setInterval (function () {
if (progressArray.length <= 0) {
// Bersihkan timer ini, jika tidak, itu akan dieksekusi sepanjang waktu (setTimeout: berapa milidetik eksekusi penundaan, sekali; setInterval: berapa milidetik eksekusi, beberapa kali)
clearInterval (timer);
} kalau tidak {
// Metode shift () digunakan untuk menghapus elemen pertama dari array darinya dan mengembalikan nilai elemen pertama.
var entitas = progressArray.shift ();
temparray.push (entitas);
// Jalankan metode run dari setiap objek elemen
entity.run ();
}
}, timer);
</script>
</body>
</html>