1. مقدمة
لطالما كنت مغرمًا جدًا بـ Win8 في انتظار شريط التقدم الدائرة. عندما خرج Win8 لأول مرة ، شعرت به مذهلة للغاية! لم يكن لدي أي فكرة في ذلك الوقت ولم أدرسها. بعد البحث عن المعلومات عبر الإنترنت مؤخرًا ، حصلت عليها أخيرًا! دعنا نذهب إلى العرض التوضيحي أولاً ونظهر وجهك القبيح! للمعاينة ، يرجى الاطلاع على: Win8 Progress Bar.
2. مقدمة موجزة
كتابة JavaScript الأصلية ، تحتاج إلى فهم أن JS يعتمد على البرمجة الموجهة للكائنات وحساب الإحداثيات الدائرية!
مبدأ التنفيذ: ملخص لكل نقطة في كائن (نوع ProgressBarwin8) ، قم بتخزين كل كائن DOT في صفيف (ProgressArray) ، تأخير تنفيذ طريقة التشغيل لكل كائن DOT. أما بالنسبة للركض الأسرع والأسرع ، فإنه يتحقق عن طريق تغيير توقيت ميلي ثانية.
نسخة الكود كما يلي:
// تحديد حجم الإحداثيات للعنصر X و Center X ، وقم بتعيين وقت تأخير المؤقت
if (this.position.left <this.fixed.left) {
this.delay += .5 ؛
} آخر {
this.delay -= .5 ؛
}
من الأفضل استخدام رمز المصدر! قدرة التعبير ليست جيدة جدًا (التعليقات في الكود أكثر تفصيلًا ، وسترى بشكل أكثر وضوحًا).
نسخة الكود كما يلي:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/>
<title> Imitation Win8 في انتظار شريط التقدم </title>
<style>
جسم {
الهامش: 0 ؛
الحشو: 0 ؛
الخلفية: الأخضر
}
</style>
</head>
<body>
<script>
// ظروف التحضير ********* *********
// صيغة تحويل زاوية radi: RADIUS = MATH.PI* angle/180 ؛ يتم حساب وظائف مثل Math.sin () ، Math.cos () في JS على أساس الراديان
// صيغة الحساب لإحداثيات المحور X للدائرة: Math.cos (Math.PI * angle/180) * TARIUS + CENTER X-AXIS TOEPINATIONS of X-axis
// صيغة حساب لإحداثيات المحور y للدوائر: Math.sin (Math.PI * angle/180) * إحداثيات محور دائرة نصف قطرها + y للدوائر
// ظروف التحضير ********* *********
// فئة العناصر النقطة (لا يوجد مفهوم للصف في JS ، فقط محاكاة هنا)
وظيفة ProgressBarwin8 () {
// إحداثيات المركز
this.fixed = {
اليسار: 0 ،
أعلى: 0
} ؛
// تنسيق عنصر علامة HTML
this.position = {
اليسار: 0 ،
أعلى: 0
} ؛
this.radius = 70 ؛ // دائرة دائرة نصف قطرها
this.angle = 270 ؛ // زاوية ، افتراضي 270
this.delay = 30 ؛ // توقيت تأخير مللي ثانية
this.timer = null ؛ // كائن وقت التوقيت
this.dom = null ؛ // عنصر علامة HTML
// نمط عنصر علامة HTML ، يجب ضبط الموضع على المطلقة
this.style = {
الموقف: "مطلق" ،
العرض: "10px" ،
الارتفاع: "10px" ،
الخلفية: "#FFF" ،
"الحدود الحدودية": "5px"
} ؛
}
// كل وظيفة في JS لديها سمة كائن النموذج الأولي ، ويمكن الوصول إلى كل مثيل
ProgressBarwin8.Prototype = {
// تشغيل طريقة
تشغيل: function () {
إذا (this.timer) {
ClearTimeout (this.timer) ؛
}
// قم بتعيين إحداثيات عنصر علامة HTML ، أي حساب إحداثيات المحور X و Y على الدائرة
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" ؛
// تغيير الزاوية
this.angle ++ ؛
// تحديد حجم الإحداثيات للعنصر X و Center X ، وقم بتعيين وقت تأخير المؤقت
if (this.position.left <this.fixed.left) {
this.delay += .5 ؛
} آخر {
this.delay -= .5 ؛
}
VAR SCOPE = هذا ؛
// Timer ، Looping لاستدعاء طريقة التشغيل ، فإنه يشعر بالرياح قليلاً
this.timer = setTimeOut (function () {
// نداء الوظيفة في JS يشير هذا إلى المتصل ، وهذه هي النافذة حاليًا
scope.run () ؛
} ، this.delay) ؛
} ،
// الإعداد الأولي لعناصر علامة HTML
defaultsetting: function () {
// قم بإنشاء عنصر Span
this.dom = document.createElement ("span") ؛
.
لـ (خاصية var في this.style) {
// يمكن استخدام طرق الكائن في JS مع. المشغلين ، أو من خلال أزواج القيمة الرئيسية
this.dom.style [property] = this.style [property] ؛
}
// لا يشمل عرض منطقة عرض المستندات في نافذة Innerwidth Innerheight الحدود وقضبان التمرير. هذه الخاصية قابلة للقراءة وقابلة للكتابة.
// قم بتعيين إحداثيات X و Y-Axis لمركز الدائرة ، وهي المنطقة البصرية الحالية هي العام ، أي نقطة الوسط
this.fixed.left = window.innerwidth / 2 ؛
this.fixed.top = window.innerheight / 2 ؛
// اضبط الإحداثيات الأولية لعنصر Span
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" ؛
// أضف علامة Span to the Documet
document.body.appendchild (this.dom) ؛
// إرجاع الكائن الحالي
إرجاع هذا ؛
}
} ؛
// إذا كنت لا تفهم ، فقم بالتعليق على الرمز التالي واختبر تشغيل نقطة أولاً
// new ProgressBarwin8 (). DefaultSetting (). Run () ؛
var progressArray = [] ، // يستخدم لتخزين كل صفيف كائن عنصر DOT. حجم الصفيف في JS متغير ، على غرار مجموعة القائمة
temparray = [] ، // تستخدم لتخزين كل كائن يتم إلقاؤه بواسطة ProgressArray. بعد تغيير حجم النافذة ، أعد تعيين إحداثيات المركزية لكل كائن.
مؤقت = 200 ؛ // Timer لتنفيذ طريقة تشغيل كائن العنصر كل ميلي ثانية
// قم بإنشاء كائن عنصر DOT وحفظه في صفيف ، وإنشاء 5 كائنات هنا
لـ (var i = 0 ؛ i <5 ؛ ++ i) {
ProgressArray.push (New ProgressBarwin8 (). DefaultSetting ()) ؛
}
// تمديد الصفيف كل طريقة ، يتم تنفيذ معظم lambdas في C# بهذه الطريقة
Array.Prototype.each = دالة (fn) {
لـ (var i = 0 ، len = this.length ؛ i <len ؛) {
.
fn.call (هذا [i ++] ، وسيطات) ؛ // أو: fn.apply (هذا [i ++] ، وسيطات)
}
} ؛
// يغير حجم النافذة الحدث ، وإعادة ضبط الإحداثيات المركزية لكل عنصر عنصر
window.onresize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2 ؛
this.fixed.top = window.innerheight / 2 ؛
}) ؛
} ؛
// كم عدد المللي ثانية المستخدمة لتنفيذ طريقة تشغيل كائن العنصر في مجموعة الصفيف
Timer = setInterval (function () {
if (progressArray.length <= 0) {
// مسح هذا المؤقت ، وإلا سيتم تنفيذه طوال الوقت (setTimeout: كم عدد ميلي ثانية من تنفيذ التأخير ، مرة واحدة ؛ setInterval: كم عدد المللي ثانية من التنفيذ ، عدة مرات)
ClearInterval (مؤقت) ؛
} آخر {
// يتم استخدام طريقة Shift () لحذف العنصر الأول من الصفيف منه وإرجاع قيمة العنصر الأول.
var intity = progressArray.Shift () ؛
temparray.push (الكيان) ؛
// تنفيذ طريقة تشغيل كل كائن عنصر
entity.run () ؛
}
} ، مؤقت) ؛
</script>
</body>
</html>