استخدم CSS+JS الأصلي لصنع ساعات بسيطة. التأثير على النحو التالي
لتحقيق هذا التأثير ، يتم تقسيمه إلى ثلاثة أجزاء رئيسية: HTML و JavaScript و CSS
جزء HTML
جزء HTML بسيط نسبيًا ، حيث يحدد Div على مدار الساعة ، والذي يحتوي على الأصل ، والساعة ، والدقيقة ، واليقين ، والتاريخ والوقت. أما بالنسبة للمقاييس والأرقام والعناصر الأخرى على مدار الساعة ، لأن الكمية كبيرة نسبيًا ، يتم إنشاؤها باستخدام JVAscript باستخدام JVAscript.
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = 'stylesheet' href = 'external css path'/> <title> clock </title> </head> <body> <body> id = "hour-line"> </viv> <div id = "line-line"> </viv> <div id = "second-line"> </viv> <!-dist-> <div id = "dist-info"> </viv> <!-time-> <div> <div id = "hour time" </viv> <script type = 'text/javaScript' src = 'javaScript path الخارجي'> </script> </body> </html>
جزء CSS
قبل بدء الكود ، هناك بعض خصائص CSS التي تحتاج إلى فهم ، مثل تحديد المواقع ، والرادي الحدود ، والتحول ، إلخ.
سمات الموقف
تحدد سمة الموضع نوع تحديد موقع العنصر ، مع خمس قيم: مطلقة ، ثابتة ، نسبية ، ثابتة ، وراثة. الافتراضي ثابت ، أي أنه لا يوجد أي موقع ، ويتم عرض العناصر وفقًا لتدفق المستند العادي ؛ الاستخدامات الرئيسية هنا مطلقة ونسبية
قيمة ampulte ، قم بتعيين العنصر على تحديد المواقع المطلقة ، ووضعه بالنسبة للعنصر العلوي الأول الذي وضع بشكل غير متوقع بشكل ثابت. يمكن وضع الموضع من خلال سمات "اليسار" ، "أعلى" ، "يمين" ، "أسفل" ؛ إذا تم وضع العنصر العلوي بشكل ثابت ، فسيتم وضعه بالنسبة إلى موضع عنصر الجسم.
في هذا المثال ، قم بتعيين ساعة Div الخارجية على النسبية ، ويتم ضبط جميع العناصر السفلية على تحديد المواقع المطلقة المطلقة ، ثم تحديد موقعها بالنسبة إلى الساعة من خلال تحديد قيم السمات مثل اليسار والأعلى.
سمة الحدود
تضيف سمة حدود الحدود الحدود المستديرة إلى عنصر. يمكنك ضبط حجم أربع زوايا مستديرة. في هذا المثال ، استخدم هذه السمة لتعيين عنصر الساعة على دائرة
فيما يلي مثال: 4 عناصر Div ، كل العرض والارتفاع هي 100 بكسل ، وتأثيرات الحدود الحدودية مختلفة:
تحويل السمة
تطبق خاصية التحويل دوران ثنائي الأبعاد أو ثلاثي الأبعاد على عنصر ، والذي يسمح لنا بتدوير العنصر أو النقل أو التحرك أو إمالة العنصر. في هذا المثال ، يتم تدوير الساعة ، الدقيقة ، الثانية ، وما إلى ذلك. بالإضافة إلى ذلك ، يمكن أن تضع سمة التحويل الأصل لموضع النقطة الأساسية للعنصر.
رمز جزء CSS
/*Global*/*{margin: 0 ؛ Padding: 0 ؛}. Clock {Width: 400px ؛ الارتفاع: 400 بكسل ؛ الحدود: 10 بكسل Solid #333 ؛ box-shadow: 0px 0px 20px 3px #444 Inset ؛ الحدود الراديوس: 210 بكسل ؛ الموقف: قريب الهامش: 5px Auto ؛ Z-Index: 10 ؛ خلفية اللون:#f6f6f6 ؛}/* رقم الساعة*/. الساعة num {width: 40px ؛ الارتفاع: 40 بكسل ؛ حجم الخط: 22px ؛ محاذاة النص: المركز ؛ رفع الخط: 40 بكسل ؛ الموقف: مطلق ؛ Z-index: 8 ؛ اللون:#555 ؛ Font-Family: Fantasy ، 'Trebuchet MS' ؛}. z-index: 20 ؛}. ساعة ساعة {العرض: 100px ؛ الارتفاع: 4 بكسل ؛ أعلى: 198 بكسل ؛ اليسار: 200 بكسل ؛ خلفية اللون:#000 ؛ الحدود الراديوس: 2px ؛ التحويل الأولي: 0 50 ٪ ؛ box-shadow: 1px -3px 8px 3px #aaa ؛}. الخط الدقيق {width: 130px ؛ الارتفاع: 2px ؛ أعلى: 199px ؛ اليسار: 190 بكسل ؛ خلفية اللون:#000 ؛ التحويل الأولي: 7.692 ٪ 50 ٪ ؛ box-shadow: 1px -3px 8px 1px #aaa ؛}. الخط الثاني {width: 170px ؛ الارتفاع: 1 بكسل ؛ أعلى: 199.5px ؛ اليسار: 180 بكسل ؛ لون الخلفية:#F60 ؛ التحويل الأولي: 11.765 ٪ 50 ٪ ؛ box -shadow: 1px -3px 7px 1px #bbb ؛}/* Origin*/. Origin {width: 20px ؛ الارتفاع: 20 بكسل ؛ الحدود الحدودية: 10px ؛ خلفية اللون:#000 ؛ الموقف: مطلق ؛ أعلى: 190 بكسل ؛ اليسار: 190 بكسل ؛ z-index: 14 ؛}/* تاريخ التاريخ*/. Date-Info {width: 160px ؛ الارتفاع: 28 بكسل ؛ ارتفاع الخط: 28 بكسل ؛ محاذاة النص: المركز ؛ الموقف: مطلق ؛ أعلى: 230 بكسل ؛ اليسار: 120 بكسل ؛ Z-index: 11 ؛ اللون:#555 ؛ خط الرصيف: جريئة ؛ Font-Family: 'Microsoft yahei' ؛}. الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ محاذاة النص: المركز ؛ الموقف: مطلق ؛ أعلى: 270 بكسل ؛ اليسار: 154px ؛ Z-index: 11 ؛ خلفية اللون:#555 ؛ الحشو: 0 ؛ box-shadow: 0px 0px 9px 2px #222 Inset ؛}. time {width: 30px ؛ الارتفاع: 30 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. اللون: #fff ؛ font-weight: Bold ؛} #دقيقة مرة {lorder-left: 1px solid #ffff ؛ اليمين الحدودي: 1px Solid #ffff ؛}/* Scale*/. على مدار الساعة {العرض: 195px ؛ الارتفاع: 2px ؛ التحويل الأولي: 0 ٪ 50 ٪ ؛ Z-index: 7 ؛ الموقف: مطلق ؛ أعلى: 199px ؛ اليسار: 200px ؛}. عرض المقياس {العرض: 12px ؛ الارتفاع: 2px ؛ خلفية اللون:#555 ؛ Float: Left ؛}. Scale-Hidden {Width: 183px ؛ الارتفاع: 2px ؛ تعويم: اليسار ؛}جزء JavaScript
لا يوجد ما يقوله عن جزء JS. بالنسبة لعمليات DOM البسيطة ، يتم تنفيذ وظيفة setInterval كل ثانية ، ويتم تغيير زاوية المؤشر ووقت العرض للتو. الرمز كما يلي
(function () {window.onload = initNumxy (200 ، 160 ، 40،40) ؛ var hour_line = document.getElementById ("ساعة ساعة") ؛ var minute_line = document.getElementById ("line-line") ؛ var second_line = document.getElementById ("second-line") ؛ var date_info = "الأحد" ، "الاثنين" ، "الثلاثاء" ، "الثلاثاء" ، "الجمعة" ، "الأحد" ، "الأحد" ، "الثلاثاء" ، "الجمعة" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، الأحد ، "الأحد" ، "الأحد" ، الأحد "،" الأحد "، الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "،" ، الأحد "، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، "الأحد" ، الأحد "،" الأحد "،" document.getelementbyed ("ساعة") ؛ this_day.getMinutes () ؛ (this_day.getmonth () - 90) + 'deg)' ؛ this_day.gethours (): this_day.gethours () ؛ this_day.getseconds () ؛ : r - 0.5 * r - 0.5 * h} ، {"left": r + r - 0.5 * w ، "top": r - 0.5 * h} ، {"left": r + r - 0.5 * w ، "top": r - 0.5 * h} ، {"left": r + 0.5 * r * 1.73205 - 0.5 * w ، : R + 0.5 * r - 0.5 * W ، "TOP": R + 0.5 * R * 1.732 - 0.5 * H} ، {"Left": R - 0.5 * W ، "TOP": R + 0.5 * R * 1.732 - 0.5 * H} ، {"left": r - 0.5 * r - 0.5 * w ، : R - 0.5 * r - 0.5 * W ، "TOP": R + 0.5 * R * 1.732 - 0.5 * H} ، {"Left": r - 0.5 * r * 1.73205 - 0.5 * W ، 0.5 * W ، "TOP": R - 0.5 * R - 0.5 * H} ، {"Left": R - 0.5 * R - 0.5 * H} ، {"Left": R - 0.5 * r - 0.5 * W ، 1.73205 - 0.5 * H} ، {"Left": R - 0.5 * R - 0.5 * H} ، {"Left": R - 0.5 * R - 0.5 * W ، "TOP": R - 0.5 * R * 1.73205 - 0.5 * H} ، {"REFT": R - 0.5 * W ، document.getElementById ("الساعة") ؛ } var clock_num = document.getelementsbyclassname ("clock-num") ؛ i <60 ؛ {Scale [i]ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.