يتم استخدام عرض التقويم ، والاختيار ، وما إلى ذلك في العديد من الأماكن على صفحة الويب. تستخدم هذه المقالة HTML و CSS و JavaScript لتنفيذ تقويم بسيط. بعد الانتهاء ، يكون التأثير مشابهًا للتأثير على الجانب الأيسر من الصفحة. يمكنك التبديل إلى الشهر السابق أو الشهر المقبل. يمكن أيضًا توسيعه وفقًا للظروف الفعلية.
HTML
جزء HTML بسيط نسبيًا ، ويعلن DIV ، ويتم إنشاء HTML المحددة باستخدام JavaScript. المحتوى الكلي يشبه هذا:
<! doctype html> <html> <head> <meta charset = 'utf-8'> <link rel = 'stylesheet' href = 'severy css path'/> <title> demo </title> </head> مسار ملف JavaScript '> </script> </body> </html>
CSS
/*الإعدادات الشاملة*/*{margin: 0px ؛ padding: 0px ؛}/***اضبط حجم التقويم*/. الارتفاع: 400 بكسل ؛ العرض: block ؛}/*** قم بتعيين المربع العلوي للتقويم*/. العرض: 100 ٪ ؛ الارتفاع: 36 بكسل ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ border-bottom: 1px solid #ddd ؛}/*** قم بتعيين أيقونة الزر للشهر الماضي*/. أعلى: 12 بكسل ؛ اليسار: 0px ؛ العرض: كتلة مضمنة. العرض: 0px ؛ الارتفاع: 0px ؛ اليسار الحدودي: 0px ؛ أعلى الحدود: 6px شفافة صلبة. اليمين الحدودي: 8px Solid #999 ؛ القاع الحدودي: 6 بكسل شفاف صلب ؛ المؤشر: مؤشر ؛}/*** تعيين زر الشهر القادم من أيقونة*/. أعلى: 12 بكسل ؛ اليمين: 0px ؛ العرض: كتلة مضمنة. العرض: 0px ؛ الارتفاع: 0px ؛ يمين الحدود: 0px ؛ أعلى الحدود: 6px شفافة صلبة. الحدود اليسرى: 8px الصلبة #999 ؛ القاع الحدودي: 6 بكسل شفاف صلب ؛ المؤشر: مؤشر ؛}/* قم بتعيين نمط جدول التقويم*/. التقويم-العرض {العرض: 100 ٪ ؛ حدود الحدود: الانهيار. النصوص النصية: الوسط ؛}/* ارتفاع سطر الجدول*/. التقويم TR {الارتفاع: 30px ؛ Line-Height: 30px ؛}/* Display Display Display Display*/. Currentday {color: red ؛}/* لون النص هذا الشهر*/. CurrentMonth {color: #999 ؛}/*لا يوجد شيء يمكن قوله عن إعدادات الأناقة ، وبعض الإعدادات البسيطة. على سبيل المثال ، فإن الرمز الخاص هو الرمز الذي يمثل "الشهر الماضي" و "الشهر المقبل" ، الذي يعتمد المواقع المطلقة ويستخدم السمة الحدودية في CSS لتعيين الأنماط.
كائن تاريخ JavaScript
قبل بدء رمز JS الرسمي ، تحتاج إلى فهم كائن التاريخ في JS. من خلال كائن التاريخ ، يمكنك الحصول على معلومات مثل السنة والشهر واليوم والوقت والطوابع الزمنية. للحصول على مرجع محدد: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = date new () ؛ // احصل على الوقت الحالي للوقت الحالي هو الاثنين ، 25 أبريل ، 2016 d1.getlyear () ؛ // الحصول على المعلومات السنوية ، 2016 d1.getmonth () ؛ // احصل على المعلومات الشهرية (بدءًا من 0: 0-11) 3 d1.getDate () ؛ // احصل على معلومات اليوم هنا النتيجة: 25 d1.getday () ؛ // احصل على المعلومات الأسبوعية (0-6) هنا النتيجة: 1
يمكنك أيضًا تعيين معلومات السنة والشهر والتاريخ مباشرة أثناء التهيئة
# تعيين 15 مارس ، 2016 var d2 = تاريخ جديد (2016 ، 2 ، 15) ؛ يتم حساب// شهور من 0 ، وتحتاج إلى طرح واحد d2.getlyear () ؛ // 2016 d2.getMonth () ؛ // 2 d2.getDate () ؛ // 15 d2.tolocaledateString () ؛ يثبت // "2016/3/15" أن الإعدادات صحيحة
يتضمن التقويم قضايا مثل عدد الأيام في الشهر. الأمر بسيط للغاية في JS. إذا تم تعيين العام والشهر واليوم ، إذا تجاوز الشهر الحالي ، فسيحسب JS تلقائيًا في الشهر المقبل. على سبيل المثال ، لدى أبريل 30 يومًا فقط. إذا تم تعيينه على 31 ، فسيقوم نوع تاريخ الحصول عليه تلقائيًا بحساب الأول من مايو. إذا تم تعيينه على 0 ، فسيقوم JS بمعالجته باعتباره 30 أبريل ، ثم 1 مايو هو 29 أبريل.
var d3 = تاريخ جديد (2016 ، 3 ، 30) ؛ d3.tolocaledateString () ؛ // "2016/4/30" var D4 = Date New (2016 ، 3 ، 31) ؛ D4.TolocalEdateString () ؛ // "2016/5/1" var d5 = New Date (2016 ، 3 ، 33) ؛ D5.TolocalEdateString () ؛ // "2016/5/3" var d6 = New Date (2016 ، 4 ، 1) ؛ d6.tolocaledateString () ؛ // "2016/5/1" var d7 = New Date (2016 ، 4 ، 0) ؛ D7.TolocalEdateString () ؛ // "2016/4/30" var d8 = DITE NEW (2016 ، 4 ، -3) ؛ D8.TOLOCALEDATESTRING () ؛ // "2016/4/27"
جافا سكريبت
بعد فهم الاستخدام الأساسي لكائنات التاريخ في JS ، فإن الخطوة التالية هي جزء تنفيذ التعليمات البرمجية. الفكرة العامة هي كما يلي: تحديد متغير DateObJ العالمي لتسجيل معلومات السنة والشهر التي يجب عرضها في الجدول. يتم أخذ المحتوى في العنوان بناءً على DateObj. يأخذ التاريخ في الجدول جميع المعلومات التي تتوافق مع العام والشهر في DateObj ، ثم يحدد موضع رقم 1 في الصف الأول من الجدول ، وذلك لعكس بيانات الأيام القليلة الماضية من الشهر السابق ، ويتم دفع بيانات هذا الشهر والشهر المقبل.
خطوات محددة:
1. إعلان متغير DateObj وتعيين القيمة الأولية لوقت النظام الحالي
2. عرض عناصر HTML في التقويم div
3. احصل على المعلومات الواردة في الشهر الأول من خلال DateObj واستخدمها لاجتياز جميع التواريخ في الجدول.
4. ربط الأحداث للشهر السابق والشهر المقبل أيقونات
(function () { /*** المستخدمة لتسجيل التواريخ. عند عرضها ، سيتم عرضها وفقًا للسنة والشهر من التاريخ في DateObj* / var dateObj = (function () {var _date = new Date () ؛ }) ؛ // مربع العنوان يعين عنوان الشهر السابق var bodybox = document.createelement ("div") ؛ id = 'calendartitle'> </span> " +" <span id = 'nextmonth' class = 'next-month'> </span> "؛ calendar.appendchild (titlebox) ؛ // إضافة إلى calendar div // اضبط بنية html من منطقة الجدول bodobox.classname =" calendar-body-body " + "<Th> One>" + "<th> اثنان </th>" + "<Th> Three>" + "</th>" + " = 0 ؛ "<td> </td>" + "</td>" + "</tr>" ؛ في الجدول وتعيين اسم الفئة*/ وظيفة showcalendardata () document.getElementByid ("CalendArtitle") ؛ _table.getelementsbytagname ("td") ؛ _THISDAYSTR = GETDATER (_THISDAY) ؛ Day_tds [i] .classname = 'currentday' ؛ } / *** inlud event من الشهر المقبل* / وظيفة bindEvent () addevent (dom ، etype ، func) {if (dom.addeventListener) {// dom 2.0 dom.addeventListener (etype ، function (e) {func (e) ؛} // dom 0 [on ' + etype] = function (e) {func (e) ؛ } / ** انقر فوق أيقونة الشهر المقبل لتشغيل* / وظيفة TonextMonth () GetDateSt (var _year = datelyear ("0" + _d) ؛في هذا المثال ، لم يتم إضافة الحدث عند النقر فوق التاريخ في الجدول. يمكنك إضافة الكود التالي إلى وظيفة Bindevent للحصول على المعلومات حول تاريخ النقر.
var table = document.getElementById ("calendartable") ؛ var tds = table.getElementsByTagName ('td') ؛ for (var i = 0 ؛ i <tds.length ؛ i ++) {addevent (tds [i] ، 'click' ، function (e) {console.log (ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.