تطبيق تقويم بسيط لتطبيق كائن التاريخ في جافا سكريبت

الكلمات السابقة

التقويم البسيط هو تطبيق شائع لكائنات التاريخ في JavaScript ولديه مجموعة واسعة من الاستخدامات. ستشرح هذه المقالة بالتفصيل أفكار تنفيذ التقويمات البسيطة.

تأثير التأثير

وصف HTML

استخدم المدخلتين من النوع = الرقم كعناصر تحكم في الإدخال لمدة عام وشهر على التوالي ، بحيث يتم تضمين زر الضبط في المتصفح المتقدم

رتب الأسبوع بالترتيب من الأحد إلى الاثنين

 <div> <header class = 'control'> <input id = "conyear" type = "number" min "min =" 1900 "max =" 2100 "step =" 1 "/> <input <viv> tue </viv> <viv> الخميس </div> <viv> الجمعة </div> <div> السبت </div> </header> <section id = 'daybox'> <div id = "div 1"> 1 </viv> <div> 2 </viv> <viv> 9 </viv> <viv> 10 </viv> <viv> 11 </viv> <viv> 12 </viv> <viv> 13 </viv> </div> 14 </viv> <viv> 15 </viv> <viv> 16 </viv> </div> 17 </viv> <div> 23 </viv> <viv> 24 </viv> <viv> 25 </viv> <viv> 26 </viv> <viv> 27 </viv> <viv> 28 </viv> <viv> 29 </viv> <div id = "day30"> 30 </div> <div id = "day31" </div> </viv> </viv>

وصف CSS

لتنفيذ التقويم البسيط ، حدد أولاً ترتيب divs من الطبقة = "اليوم" في التقويم المطلوب. هذا يسمح لجميع divs من نفس المستوى لمتابعة الحركة عن طريق تغيير موضع divs اليوم الأول.

 الجسم {margin: 0 ؛} الإدخال {الحدود: لا شيء ؛ Padding: 0 ؛}. Box {Width: 354px ؛ الهامش: 30px Auto 0 ؛ } .datebox {height: 300px ؛ الحدود: 2px سوداء صلبة ؛}. week {overflow: Hidden ؛ Border-Bottom: 1 بكسل سوداء صلبة ؛ Line-Height: 49px ؛}. Week-In {الارتفاع: 49px ؛ تعويم: اليسار. العرض: 50 بكسل ؛ text-align: center ؛}. Daybox {Overflow: Hidden ؛}. Day {Float: Left ؛ الارتفاع: 50 بكسل ؛ العرض: 50 بكسل ؛ الخط: 20px/50px 'Microsoft Yahei' ؛ text-align: center ؛}. control {overflow: hidden ؛}. con-in {height: 50px ؛ تعويم: اليسار. العرض: 100px ؛ محاذاة النص: المركز ؛ الخط: 20px/50px "Microsoft Yahei" ؛}

وصف JS

مطلوب ما مجموعه 5 تطبيقات لمنطق JS للتقويمات البسيطة:

【1】 تحتاج إلى الحصول على عدد من أيام الشهر ، وما هو اليوم الأول من اليوم الأول واليوم الثلاثين واليوم الحادي والثلاثين هو الأسبوع

【2】 وفقًا لأسبوع اليوم الأول من الشهر ، قم بتغيير قيمة الهامش اليسرى في اليوم الأول وانتقل اليوم الأول إلى الوضع المقابل ؛ بسبب العلاقة العائمة ، ستنتقل بقية الأيام أيضًا إلى الموضع المقابل أيضًا.

【3】 إخفاء أيام إضافية وفقًا لعدد الأيام في الشهر ؛ بالطبع ، يجب عرض الأيام التي قد تكون مخفية في الأشهر الأخرى قبل الاختباء.

[4] إذا كان الثلاثين من الشهر يوم الأحد ، فسيتم احتلال خط جديد. في هذا الوقت ، من خلال تغيير قيمة الهامش في اليوم الثلاثين ، سيتم نقله إلى السطر الأول (إذا كان اليوم الحادي والثلاثين قد يشغل خطًا جديدًا ، فسيتم علاج مماثل)

【5】 بعد تحميل الصفحة ، احصل على العام والشهر الحاليين لعرض تقويم الشهر الحالي ؛ عند تغيير السنة أو الشهر ، احصل على القيمة المتغيرة وقم بتحديث التقويم

 // التحضير: احصل على وظيفة النمط الحالي getCSS (OBJ ، النمط) {if (window.getComputedStyle) {return getComputedStyle (obj) [style] ؛ } إرجاع OBJ.CurrentStyle [style] ؛} // التنفيذ 1: احصل على عدد أيام الشهر ، ويوم الأسبوع في اليوم الأول ، 30 و 31 من الشهر وظيفة get_data (السنة ، الشهر) {var result = {} ؛ var d = new Date () ؛ // إذا كان شهر فبراير إذا (الشهر == 2) {// إذا كان سنة قفزة إذا ((السنة ٪ 4 === 0 && year ٪ 100! == 0) || السنة ٪ 400 === 0) {result.days = 29 ؛ // إذا كانت سنة مشتركة} {result.days = 28 ؛ } // إذا كان هذا هو 4 و 6 و 9 و نوفمبر} آخر إذا (الشهر == 4 || month == 6 || month == 9 || month == 11) {result.days = 30 ؛ } آخر {result.days = 31 ؛ // اليوم الحادي والثلاثين من الشهر هو نتيجة الأسبوع. } // في اليوم الأول من الشهر هو نتيجة الأسبوع. if (month! = 2) {// اليوم الثلاثين من الشهر هو نتيجة الأسبوع. } نتيجة الإرجاع ؛} // التنفيذ 2: وفقًا للأسبوع العاشر من اليوم الأول من الشهر ، قم بتعيين الهامش اليسرى في اليوم الأول = العرض *x بحيث يتوافق مع وظيفة الأسبوع الصحيح move_day1 (السنة ، الشهر) {var week1 = get_data (السنة ، الشهر). day1.style.marginleft = week1 ٪ 7*parseint (getCss (day1 ، 'width'))+ 'px' ؛} // التنفيذ 3: إخفاء عدد الأيام الإضافية وفقًا لعدد الأيام في الشهر. بالطبع ، أولاً وقبل كل شيء ، يجب أن نعرض أولاً عدد الأيام المخفية في الأشهر الأخرى وظيفة Hide_days (السنة ، الشهر) {// استعادة عدد الأيام التي قد يتم إخفاءها في أشهر أخرى (var i = 28 ؛ i <31 ؛ i ++) {daybox.children [i] .style.display = 'block' ؛ } // إخفاء عدد الأيام الزائدة في الشهر var days = get_data (السنة ، الشهر). لـ (var i = days ؛ i <31 ؛ i ++) {daybox.children [i] .style.display = 'none' ؛ }} ؛ // التنفيذ 4: إذا كان 30 أو 31 من الشهر يوم الأحد ، فسيتم احتلال صف جديد. انقل اليوم المشغل حديثًا إلى الصف الأول عن طريق تعيين وظيفة الهامش MOVE_DAY30 (السنة ، الشهر) {// إذا كان 30th من الشهر يوم الأحد إذا (get_data (السنة ، الشهر) .day30week === 0) day31.style.margintop = parseint (getCss (day31 ، 'height')) *(-5) + 'px' ؛ day31.style.margintop = parseint (getCss (day31 ، 'height')) *(-5) + 'px' ؛ day31.style.marginleft = getCss (day31 ، 'width') ؛ يعود؛ } آخر {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0' ؛ } // إذا كان 31 من الشهر هو الأحد إذا (get_data (السنة ، الشهر) .day31week === 0) {day31.style.margintop = parseint (getCss (day31 ، 'height')) *(-5) + 'px' ؛ } آخر {day31.style.margintop = '0' ؛ }} // التنفيذ 5: عند تحميل الصفحة ، احصل على العام والشهر الحاليين ، عرض تقويم الشهر الحالي ؛ عند تغيير السنة أو الشهر ، احصل على التقويم العام والشهر المتغير var var = conyear.value = Date () conyear.value ؛ var month = conmonth.value ؛ if (year <1900 || year> 2100) {year = conyear.value = new date (). getLyear () ؛ } if (month <1 || month> 12) {month = conmonth.value = new date (). getMonth () + 1 ؛ } move_day1 (السنة ، الشهر) ؛ Hide_days (سنة ، شهر) ؛ move_day30 (سنة ، شهر) ؛}

عرض رمز المصدر

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.