لطالما أردت أن أكتب تقويمًا في JavaScript من قبل ، لكن نظرًا لعدم وجود أفكار جيدة على الإطلاق ، لم أجربها لفترة طويلة. في الآونة الأخيرة ، صادفت مثالًا على تقويم بسيط مكتوب في JavaScript على الإنترنت. على الرغم من أن الكود ليس كبيرًا ، إلا أنه أعتقد أنه يفسر مبدأ التنفيذ لتقويم JS جيدًا. لقد جربتها أيضًا واكتسبت الكثير. بعد إتقان مبادئ التنفيذ الأساسية ، أريد إضافة المزيد من الوظائف وأستطيع تشغيلها بحرية. دعني أشاركها هنا أولاً. إذا كنت مهتمًا ، يمكنك تجربته!
1. مشكلة عدد صف الجدول
نظرًا لأنك تريد عرض جدول التاريخ ، يجب أولاً معرفة عدد الصفوف والأعمدة الموجودة في هذا الجدول. تم تحديد عدد الأعمدة ، مع ما مجموعه 7 أعمدة من الأحد (العمود الأول في التقويم هو الأحد) إلى السبت. قبل حل مشكلة عدد الصفوف ، يجب أولاً معرفة ما هو اليوم الأول من الشهر ، لأن اليوم الأول من كل شهر لا يبدأ من أيام الأحد في التقويم. قد يكون يوم الجمعة والسبت ، لذلك يجب استبدال الجزء الأيسر من الأول بجدول فارغ. إذن كم عدد الجداول الفارغة التي يجب استخدامها بدلاً من ذلك؟ يجب علينا هنا استخدام طريقة getDay () ، التي تُرجع رقمًا في المصفوفة [0-6] ، ويمثل 0 يوم الأحد ، ويمثل 1 الاثنين ، ويمثل 2 الثلاثاء ، وهكذا. لذلك إذا كان الأول من الشهر هو يوم الجمعة ، فستكون هناك حاجة إلى 5 نماذج فارغة لاستبدالها على اليسار. ثم ، إذا كان هناك 31 يومًا في الشهر ، فإن العدد الأخير من الصفوف يمكن العثور عليه هو:
var tr_nums = math.ceil ((5 + 31)/7) ؛
بالطبع ، ليس كل شهر 31 يومًا ، لذلك يتعين علينا إنشاء مجموعة من 12 شهرًا ، ويمثل كل عنصر عدد الأيام كل شهر. ومع ذلك ، فبراير مميز جدا. هناك 29 يومًا في فبراير في سنة قفزة و 28 يومًا فقط في فبراير في عام عادي. لذلك ، قبل إنشاء صفيف ، يجب عليك إنشاء وظيفة تقفز من قبل نفسك:
// إذا كان من الممكن تقسيم السنة الحالية على 4 ولكن لا يمكن تقسيمها على 100 أو يمكن تقسيمها على 400 ، فيمكن تحديدها على أنها سنة قفزة ، أو العودة 1 ، وإلا (السنة 100! = 0؟ 1: (السنة ٪ 400 == 0؟ 1: 0)): 0 ؛}
ثم نقوم بإنشاء مجموعة من أشهر:
var days_per_month = صفيف جديد (31 ، 28 + isLeap (سنة) ، 31 ، 30 ، 31 ، 30 ، 31 ، 31 ، 30 ، 31) ؛
هذا يضمن أن يتم إخراج العدد الصحيح من الأيام في كل من السنوات العادية والقفز. يتم استخدام الرمز التالي للحصول على المعلومات ذات الصلة لهذا اليوم:
var اليوم = تاريخ جديد () ، // احصل على التاريخ الحالي y = اليوم. = تاريخ جديد (y ، m ، 1) ، // احصل على اليوم الأول من الشهر في اليوم الأول = firstday.getday () ، // الحكم على يوم الأسبوع (العودة إلى واحد من [0-6] ، 0 يمثل الأحد ، 1 يمثل الاثنين ، وهكذا في) Days_per_month = New Array (31 ، 28 + Isleap (y) ، 31 ، 30 ، 31 ، 31 ، 30 ، 30 ، 30 ، 31 ،
لذلك في النهاية ، يمكنك الحصول على عدد صفوف الجدول المطلوبة لهذا الشهر:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7) ؛ // تحديد عدد الصفوف المطلوبة لجدول التاريخ
2. طباعة جدول التقويم
الجدول نفسه عبارة عن صفيف ثنائي الأبعاد ، لذا دع الماجستير يخرج ويدير حلقتين لإكماله. الرمز كما يلي:
لـ (i = 0 ؛ i <str_nums ؛ i += 1) {// الطبقة الأولى للحلقة تنشئ علامة tr tran.write ('<tr>') ؛ لـ (k = 0 ؛ k <7 ؛ k ++) {// الطبقة الثانية للحلقة تنشئ علامة td var idx = 7 * i+k ؛ // إنشاء فهرس لكل جدول ، بدءًا من 0 var date = idx - dayofweek + 1 ؛ // تطابق الأول من الشهر مع الأسبوع // افعل شيئًا آخر} document.write ('</tr>') ؛ }3. قم بإرفاق رمز تقويم JS الكامل
<script> // judge ما إذا كانت السنة الحالية هي سنة قفزة (هناك 29 يومًا في فبراير من السنة القفزة و 28 يومًا فقط في فبراير من السنة العادية) وظيفة IsLeap (السنة) {Return Year 4 == 0؟ (السنة 100! = 0؟ 1: (السنة ٪ 400 == 0؟ 1: 0)): 0 ؛ } var i ، k ، today = new date () ، // احصل على التاريخ الحالي y = اليوم. جدول التاريخ) FirstDay = تاريخ جديد (Y ، M ، 1) ، // احصل على اليوم الأول من الشهر في اليوم الواسع = FirstDay.getDay () ، // ugne the Day of the Week (العودة واحدة في [0-6] ، 0 يمثل الأحد ، 1 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 31 ، 30 ، 31 ، 30 ، 31 ، 31 ، 30 ، 31 ، 30 ، 31) ، // إنشاء صفيف الشهر str_nums = math.ceil ((dayofweek + days_per_month [m]) /7) ؛ // حدد عدد الصفوف المطلوبة لمستند جدول التاريخ. write ("<table cellpacing = '0'> <tr> <th> اليوم </th> <th> اثنان </th> <th> اثنان </th> <th> أربعة </th> </th> Six </th> </tr>") ؛ // قم بطباعة الصف الأول من الجدول (عرض الأسبوع) لـ (i = 0 ؛ i <str_nums ؛ i += 1) {// إنشاء مستند جدول تاريخ ('<tr>') ؛ لـ (k = 0 ؛ k <7 ؛ k ++) {var idx = 7 * i+k ؛ // إنشاء فهرس لكل جدول ، بدءًا من 0 var date = idx - dayofweek + 1 ؛ // تطابق الأول من الشهر مع الأسبوع (التاريخ <= 0 || Date> days_per_month [m])؟ Date = '': Date = idx - DayOfWeek + 1 ؛ // الفهرس أقل من أو يساوي 0 أو أكبر من الحد الأقصى لقيمة الشهر ، استخدم جدولًا فارغًا بدلاً من التاريخ == D؟ document.write ('<td>' + date + '</td>'): document.write ('<td>' + date + '</td>') ؛ // تمييز اليوم} document.write ('</tr>') ؛ } document.write ('</table>') ؛ </script>دعنا نلعب بحرية في جزء CSS. الوقت الحالي هو 2 مايو 2016 ، والأداءات على النحو التالي:
المقال أعلاه "تأثير التقويم البسيط في يوم كتابة JS" هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.