تأثير ساعة أخرى قادمة. لا يتطلب هذا التنفيذ قماشًا ، ويتم رسمه بواسطة Div و UL و LI ، وهو أمر ممتع وواقعي.
هاها ~
إن JS تحتاج إلى تحقيق هذا التأثير المتمثل في التنقل ، ولكن لا يوجد الكثير من المحتوى في JS ، لذلك ليس من الصعب.
إنها بشكل أساسي فكرة استخدام التحويل في CSS. تحويل العديد من الساعات المتغيرة والساعات العادية
إنه شيء مستدير في ذهني. هل يمكنني تدوير هذه الخاصية (تدوير) لتنفيذها؟ مقياسها
باستخدام الدوران ووضع نقطة الدوران في وسط الدائرة ، ألا يكون من الممكن أن تدور حول مركز الدائرة؟ أسفل ساعة الساعة ليست
هل مركز الدائرة على اتصال؟ ثم سيكون من المقبول ضبط أسفل ساعة ساعة على نقطة الدوران. أتحدث تقريبًا عن أفكاري.
شفرة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> تحويل </title> <style id = "css"> #clock {width: 200px ؛ الارتفاع: 200 بكسل ؛ الحدود: 2px الصلبة #000 ؛ الحدود الحدودية: 50 ٪ ؛ الهامش: 100px Auto 0 ؛ الموقف: قريب } #clock ul {width: 200px ؛ الارتفاع: 200 بكسل ؛ الموقف: قريب على غرار القائمة: لا شيء ؛ الحشو: 0 ؛ الهامش: 0 ؛ } #clock ul {width: 200px ؛ الارتفاع: 200 بكسل ؛ الموقف: قريب على غرار القائمة: لا شيء ؛ الحشو: 0 ؛ الهامش: 0 ؛ } #clock ul {width: 2px ؛ الارتفاع: 10 بكسل ؛ الخلفية: #000 ؛ التحويل الأولي: المركز 100 بكسل ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 50 ٪ ؛ } #clock ul li: nth-type (5n+1) {height: 20px ؛ } #Hour {height: 40px ؛ العرض: 4px ؛ الخلفية: #00fefe ؛ الموقف: مطلق ؛ أعلى: 60px ؛ اليسار: 99px ؛ التحويل الأولي: أسفل المركز ؛ } #min {height: 60px ؛ العرض: 3px ؛ الخلفية: #001AFE ؛ الموقف: مطلق ؛ أعلى: 40 بكسل ؛ اليسار: 99px ؛ التحويل الأولي: أسفل المركز ؛ التحويل: تدوير (15deg) ؛ } #sec {height: 70px ؛ العرض: 2px ؛ الخلفية: #000 ؛ الموقف: مطلق ؛ أعلى: 30 بكسل ؛ اليسار: 99px ؛ التحويل الأولي: أسفل المركز ؛ } #dot {width: 10px ؛ الارتفاع: 10 بكسل ؛ الموقف: مطلق ؛ اليسار: 95 بكسل ؛ أعلى: 95 بكسل ؛ الخلفية: #AAA ؛ الحدود الحدودية: 50 ٪ ؛ } </style> </head> <body> <div id = "clock"> <ul> </ul> <div id = "hour"> </viv> <div id = "min"> </viv> <div id = "sec"> </viv> <div id = "dot"> </viv> <sistr> var ocss = " var oclock = document.getElementById ("clock") ؛ var oul = oclock.getElementSbyTagName ("ul") [0] ؛ var Ohour = document.getElementById ("ساعة") ؛ var omin = document.getElementById ("min") ؛ var osec = document.getElementById ("sec") ؛ var strli = "" ؛ var strcss = "" ؛ لـ (var i = 0 ؛ i <60 ؛ i ++) {strli+= "<li> </li>" ؛ } oul.innerhtml = strli ؛ لـ (var i = 0 ؛ i <60 ؛ i ++) {strcss+= '#clock ul li: nth-of-type ('+(i+1)+') {transform: rotate ('+i*6+'deg) ؛}' ؛ } ocss.innerhtml+= strcss ؛ وقت()؛ setInterval (time ، 1000) ؛ time function () {var date = new date () ؛ var h = date.gethours () ؛ var m = date.getMinutes () ؛ var s = date.getSeconds () ؛ Ohour.Style.transform = "Rotate ("+(H+M/60)*30+"deg)" ؛ omin.style.transform = "Rotate ("+(M+S/60)*6+"deg)" ؛ osec.style.transform = "Rotate ("+S*6+"deg)" ؛ } </script> </body> </html>أهم شيء في الرسم مع العلامات هو تحديد المواقع ، لأنه بهذه الطريقة يمكننا وضع المربع الذي تم تشكيله في الشكل الذي تريده. يمكن الحصول على ورقة نمط CSS الداخلية عن طريق الحصول على عناصر ، بحيث يمكنك إضافة أنماط إليها باستخدام InnerHTML ، وإضافتها في حلقة. هناك أيضًا العديد من المقاييس ، بحيث يمكنك استخدام Loop لإضافة ، مما يوفر الوقت والجهد. بالنسبة للوقت المتبقي ، يمكنك تنفيذ الوظيفة كل ثانية واحدة ، بحيث ستتحرك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.