لقد قمنا بالفعل بتحليل إنشاء ساعة تناظرية باستخدام باستخدام CSSوجافا سكريبت. في هذا البرنامج التعليمي ، سنصنع نفس الساعة باستخدام CSS3 لنرى كم معيار جديديغير نهج تطوير التأثيرات المختلفة. سيعمل العرض التوضيحي لهذا البرنامج التعليمي فقط في المتصفحات التي تدعم خاصية CSS3 استدارة(لا يعمل العرض التجريبي في IE6).
تحويل CSS3: تدوير
التحويل: تدوير- خاصية CSS 3 جديدة تتيح لك تدوير العناصر المختلفة. بمساعدة عمليات التحويل ، يمكنك أيضًا تغيير حجم العناصر ، وإدخال التشوهات أفقيًا ورأسيًا ، وتحريك العناصر حول صفحة الويب. كل هذا يمكن تحريكه باستخدام الخاصية انتقال(مع أنواع مختلفةالانتقالات والمدة).
يمكن تنفيذ نفس الخطوات لتحريك عناصر الصفحة باستخدام بعض مكتبات JavaScript (على سبيل المثال ، jQuery). بالطبع ، باستخدام jQuery ، من الممكن تحريك التغيير كثيرًا أكثرخصائص CSS من استخدام ملفات انتقال... لكن jQuery هي أداة CSS مضمنة ، ومكتبات JavaScript هي أدوات خارجية قد لا تكون متاحة. على أي حال ، يفتح CSS3 اتجاهات واعدة جديدة لتطوير المطورين.
الرسومات
أولاً ، تحتاج إلى إنشاء واجهة رسومية على مدار الساعة. سيكون لدينا قاعدة وثلاثة أسهم. يتم تقطيع جميع الأجزاء المتحركة في Photoshop إلى ارتفاع 600 بكسل وعرض 30 بكسل ، ويتم وضعها عموديًا ، وافتراضيًا الخاصية استدارةبتدوير العنصر حول المركز. يمكنك استخدام الممتلكات أصل التحويلمن أجل ضبط مركز الدوران على نقطة مختلفة.
يمكن استخدام أي صورة لقاعدة الساعة. الأجزاء المتحركة عبارة عن صور تنسيق PNGبشفافية.
مؤرشف مع مصدر الرمزوشملت مظاهرة ملف PSDالذي يحتوي على جميع الصور.
ترميز HTML
علامات الساعة - بسيطة قائمة غير مرتبة... يحتوي كل عنصر من عناصر القائمة على جزء متحرك وله معرف مطابق:
CSS
#clock (الموضع: نسبي ؛ العرض: 600 بكسل ؛ الارتفاع: 600 بكسل ؛ الهامش: 20 بكسل تلقائي 0 تلقائي ؛ الخلفية: url (clockface.jpg) ؛ نمط القائمة: لا شيء ؛) # ثانية ، # دقيقة ، # ساعة (الموضع: مطلق ؛ العرض: 30 بكسل؛ الارتفاع: 600 بكسل؛ الجزء العلوي: 0 بكسل؛ اليسار: 285 بكسل؛) # ثانية (الخلفية: url (sechand.png)؛ z-index: 3؛) #min (الخلفية: url (minhand.png)؛ z -الفهرس: 2 ؛) # ساعة (الخلفية: url (hourhand.png) ؛ z-index: 1 ؛)
CSS بسيط للغاية أيضًا. نظرًا لأن الأجزاء المتحركة لها نفس الأبعاد ونقاط البداية ، يمكننا إعلانها معًا لتجنب التكرار. عنصر ماييحصل على مواضع نسبي ، مما يسمح بتحديد مواضع مطلق للأسهم الموجودة بداخله.
سيتم تطبيق CSS3 برمز jQuery صغير.
جافا سكريبت
- نحصل على الوقت للساعة
- احسب وأدخل أنماط CSS(زاوية الدوران) لكل عنصر.
- تحديث أنماط CSS على فترات منتظمة.
تجدر الإشارة إلى أن jQuery يعمل بشكل رائع مع خصائص CSS3 الجديدة. أيضًا ، نظرًا لأنه يتم إضافة الأنماط ديناميكيًا ، يتم التحقق من صحة ملف CSS على أنه CSS2.1!
نحصل على الوقت
يمكن أيضًا الحصول على الوقت باستخدام كود PHP ، ولكن هذا سيكون وقت الخادم. ويعود JavaScript الوقت المحليالمستعمل.
سوف نتلقى المعلومات باستخدام تاريخ ()وضبط جميع المتغيرات. سوف نستخدم وفقا لذلك GetSeconds (), GetMinutes ()أو GetHours ()ل تاريخ ()لتعيين الثواني والدقائق والساعات على التوالي:
Var ثانية = new Date (). GetSeconds ()؛
في السطر أعلاه ، سيتم الحصول على رقم في النطاق من 0 إلى 59 وتعيينه إلى متغير ثواني.
أوجد الزاوية
ثم تحتاج إلى حساب زاوية الدوران لكل سهم. بالنسبة لعقرب الثواني وعقرب الدقائق ، اللذان لهما 60 موضعًا على دائرة الساعات ، نحتاج إلى قسمة 360 درجة على 60 ، وهو ما يعطينا الرقم 6. أي أن كل ثانية أو دقيقة تقابل دورانًا بمقدار 6 درجات. سنخزن نتيجة الحساب في متغير آخر. للثواني ، يبدو الرمز كما يلي:
فار sdegree = ثواني * 6 ؛
بالنسبة للساعة ، ستكون الحسابات مختلفة. نظرًا لأن لدينا قرصًا به 12 موضعًا لعقرب الساعات ، فإن كل ساعة تقابل زاوية دوران 30 درجة (360/12 = 30). لكن يجب أن يكون عقرب الساعات في حالة وسيطة ، أي يجب أن يتحرك كل دقيقة. أي عند الساعة 4:30 يجب أن يكون عقرب الساعات في منتصف المسافة بين الساعة 3 و 4. إليك كيف نفعل ذلك:
فار hdegree = ساعات * 30 + (دقيقة / 2) ؛
أي أننا نضيف إلى زاوية الدوران بعدد الساعات أيضًا قيمة قسمة عدد الدقائق على 2 (مما يعطينا قيمة في النطاق من 0.5 إلى 29.5). وهكذا ، "يدور" عقرب الساعات بزاوية من 0 إلى 30 درجة (زيادة الساعة).
على سبيل المثال:
ساعتان و 40 دقيقة -> 2 * 30 = 60 درجة و 40/2 = 20 درجة. المجموع: 80 درجة.
يمكن الافتراض أن الساعة ستظهر ذلك بعد الساعة 12 ظهرًا ، لأن قيمة الدوران ستكون أكثر من 360 درجة. لكن كل شيء يعمل بشكل جيد.
نحن الآن جاهزون لإدخال قواعد CSS.
تحديد النمط
هذا ما تبدو عليه قاعدة CSS3 استدارةفي ورقة الأنماط:
#sec (-webkit-transform: rotate (45deg) ؛ -moz-transform: rotate (45deg) ؛)
وهذه هي الطريقة التي سيتم بها إدراج الكود باستخدام jQuery:
$ ("# sec"). css (("- moz-transform": "rotate (45deg)"، "-webkit-transform": "rotate (45deg)"))؛
المشكلة الوحيدة هي ضبط قيمة الزاوية الناتجة في متغير "sdegree" على بناء الجملة بدلاً من 45 درجة. تحتاج إلى بناء سلسلة في متغير آخر سروتواستبدال الوسيطة الثانية تمامًا. مثله:
Var srotate = "rotate (" + sdegree + "deg)" ؛
وسيظهر كود jQuery بالشكل التالي:
$ ("# sec"). css (("- moz-transform": srotate، "-webkit-transform": srotate))؛
ضع كل شيء معا
سيبدو كود jQuery بهذا الشكل:
$ (مستند). ؛ $ ("# sec"). css (("- moz-transform": srotate، "-webkit-transform": srotate))؛)، 1000)؛ setInterval (function () (var Hours = new Date () .getHours ()؛ var mins = new Date (). getMinutes ()؛ var hdegree = ساعات * 30 + (mins / 2)؛ var hrotate = "rotate (" + hdegree + "deg)"؛ $ ("# ساعة ") .css ((" - moz-transform ": hrotate،" -webkit-transform ": hrotate))؛)، 1000)؛ setInterval (function () (var mins = new Date (). getMinutes ()؛ var mdegree = mins * 6؛ var mrotate = "rotate (" + mdegree + "deg)"؛ $ ("# min"). css (("- moz-transform": mrotate، "-webkit-transform": mrotate) ) ؛) ، 1000) ؛)) ؛
نحن نستخدم وظيفة JavaScript تعيين الفاصل الزمنيلتحديث الأنماط كل ثانية. يجب تحديث المتغيرات التي تتلقى قيم الوقت فيه. خلاف ذلك ، ستصبح الساعة قمامة عديمة الفائدة على الصفحة.
استنتاج
يوضح هذا الدرس التطبيق العملي للممتلكات استدارةلا تتعلق بالتصميم.
هذا نص بسيط يوضح وقت النظام في جافا سكريبت بسيطنص. الساعات والدقائق والثواني مفصولة بنقطتين - هذا كل شيء.
من أجل ضبط طريقتك الخاصة على الساعة ، يكفي تحديد نمط الكتلة بالمعرف - # time. في CSS ، يمكنك ضبط الخط الخاص بك على مدار الساعة ولونه وحجمه. إذا كنت لا تحتاج إلى ساعة بسيطة ، ولكنها أكثر تعقيدًا ، فقم بإلقاء نظرة على ساعة الفلاش للموقع. من أين يحصل البرنامج النصي على بيانات الوقت؟ الوقت المعروض هو بالضبط الوقت الذي تم ضبطه على الجهاز.
التركيب
الصق الكود التالي أينما تريد أن ترى الساعة على الموقع. في uCoz ، يمكن أن يكون هذا ، على سبيل المثال ، "الجزء العلوي" أو "الجزء السفلي من الموقع":
200؟ "200px": "" + (this.scrollHeight + 5) + "px")؛ ">
00:00:00
سيظهر النص على الفور في المكان الذي قمت بتثبيته فيه ، سطر نصي مع ساعة. على سبيل المثال، "00:00:00"... وبالمناسبة ، فإن الثواني والدقائق والساعات تتكون دائمًا من رقمين ، لذا فإن تغيير القيم يكون سلسًا.
لنصنع ساعة إلكترونية باستخدام التاريخ والوقت مسجو CSS3لقليل من الرسوم المتحركة.
لغة البرمجة
الترميز بسيط ومرن. نخلق DIVمع الفصل ساعة, DIVمع الفصل تاريخوالتي ستعرض تاريخًا وقائمة غير مرتبة تحتوي على الساعات والدقائق والثواني.
CSS
الأنماط مع القليل من الرسوم المتحركة:
الحاوية (العرض: 960 بكسل ؛ الهامش: 0 تلقائي ؛ تجاوز: مخفي ؛). الساعة (العرض: 800 بكسل ؛ الهامش: 0 تلقائي ؛ الحشو: 30 بكسل ؛ الحد: 1 بكسل صلب # 333 ؛ اللون: #fff ؛) # التاريخ (الخط- العائلة: Arial ، Helvetica ، sans-serif ؛ حجم الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ ظل النص: 0 0 5px # 00c6ff ؛) ul (العرض: 800 بكسل ؛ الهامش: 0 تلقائي ؛ الحشو: 0 بكسل ؛ قائمة- النمط: لا شيء ؛ محاذاة النص: المركز ؛) ul li (العرض: مضمّن ؛ حجم الخط: 10em ؛ محاذاة النص: المركز ؛ عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛ ظل النص: 0 0 5px # 00c6ff؛) # نقطة (الموضع: نسبي ؛ -moz-animé: mymove 1s سهل لانهائي ؛ -webkit-animation: mymove 1s سهل اللانهائي ؛ padding-left: 10px ؛ padding-right: 10px ؛) @ -webkit-keyframes mymove ( 0٪ (عتامة: 1.0 ؛ ظل النص: 0 0 20px # 00c6ff ؛) 50٪ (عتامة: 0 ؛ ظل النص: لا شيء ؛) 100٪ (عتامة: 1.0 ؛ ظل النص: 0 0 20px # 00c6ff ؛) ) @ -moz-keyframes mymove (0٪ (opacity: 1.0؛ text-shadow: 0 0 20px # 00c6ff؛) 50٪ (opacity: 0؛ text-shadow: none؛) 100٪ (opacity: 1.0؛ text-shadow : 0 0 20px # 00c6ff؛))
شبيبة
نحن نتواصل مسجمكتبة
ثم نصنا
- موعد جديد ()- يخلق كائنًا جديدًا تاريخبقيمة التاريخ الحالي والوقت الحالي في متصفح الكمبيوتر.
- setDate ()- تحدد الطريقة يوم الشهر (من 1 إلى 31) ، حسب التوقيت المحلي
- getDate ()- تقوم الطريقة بإرجاع يوم من الشهر (من 1 إلى 31) للتاريخ المحدد وفقًا للتوقيت المحلي
- getSeconds () ، getMinutes ()و getHours ()- تتيح لك هذه الطرق جلب الثواني والدقائق والساعات من الوقت الحالي إلى المتصفح.
- (ثواني< 10 ? "0" : "") + seconds) - يضيف صفرًا بادئًا إلى قيمة الثواني (الدقائق والساعات). حرف او رمز ? و : تشمل ثلاثي ( ثلاثي) المشغل أو العامل. هذا عامل خاص يُرجع القيمة قبل النقطتين إذا كان الشرط من قبل سؤال (? ) حق ( حقيقية) ، أو القيمة بعد القولونإذا كانت الحالة خاطئة ( خاطئة).
- وظيفة تعيين الفاصل الزمنيهو المعيار جافا سكريبتوظيفة ، لا جزء مسج... ينفذ الكود عدة مرات ، على فترات منتظمة (مللي ثانية).
هذا هو نصهم الرئيسي:
200؟ "200px": "" + (this.scrollHeight + 5) + "px")؛ "> 00:00:00
في الجزء العلوي نرى:
200؟ "200px": "" + (this.scrollHeight + 5) + "px")؛ "> 00:00:00
ما عليك سوى إضافة نص عريض ولون أصفر وأسهم.
200؟ "200px": "" + (this.scrollHeight + 5) + "px")؛ "> « 00:00:00»
وهذا ما حدث:
لذلك ترى بنفسك كيف تغير كل شيء ، والآن يمكنك أن تفعل كل شيء بنفسك وتضبطه بشكل جميل ليناسب أسلوبك. أن الآخرين لا يمكن أن يفعلوا ، لأن هناك فلاش ، أنهم ليسوا هنا.
الآن بالإضافة إلى الساعة على الفلاش
200؟ "200px": "" + (this.scrollHeight + 5) + "px")؛ ">
لذلك يمكنك اختيار أفضل ما تفضله ووضعها ، لأنه يمكن تثبيت بعضها في الكتلة ، ولكن أولها تفضل أكثر ، لأنها مرنة وقابلة للتخصيص ، وهو ما يمكن للجميع القيام به.