การแสดงปฏิทินการเลือก ฯลฯ ใช้ในหลาย ๆ ที่บนหน้าเว็บ บทความนี้ใช้ HTML, CSS และ JavaScript เพื่อใช้ปฏิทินอย่างง่าย หลังจากเสร็จสิ้นเอฟเฟกต์จะคล้ายกับเอฟเฟกต์ทางด้านซ้ายของหน้า คุณสามารถเปลี่ยนเป็นเดือนก่อนหน้าหรือเดือนหน้า นอกจากนี้ยังสามารถขยายได้ตามเงื่อนไขจริง
HTML
ส่วน HTML นั้นค่อนข้างง่ายประกาศ DIV และ HTML ที่เฉพาะเจาะจงถูกสร้างขึ้นโดยใช้ JavaScript เนื้อหาโดยรวมเป็นแบบนี้:
<! doctype html> <html> <head> <meta charset = 'utf-8'> <link rel = 'stylesheet' href = 'เส้นทางไฟล์ CSS ภายนอก'/> <title> ตัวอย่าง </title> </head> <body> เส้นทางไฟล์ '> </script> </body> </html>
CSS
/*การตั้งค่าโดยรวม*/*{มาร์จิ้น: 0px; padding: 0px;}/***ตั้งค่าขนาดของปฏิทิน*/. ปฏิทิน {width: 240px; ความสูง: 400px; จอแสดงผล: block;}/*** ตั้งกล่องด้านบนของปฏิทิน*/. ปฏิทิน. Calendar-title-box {ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความสูง: 36px; ความสูงของสาย: 36px; TEXT-ALIGN: CENTER; ขอบด้านล่าง: 1px Solid #DDD;}/*** ตั้งค่าไอคอนปุ่มสำหรับเดือนที่แล้ว*/. ปฏิทิน .Prev-Month {ตำแหน่ง: Absolute; ด้านบน: 12px; ซ้าย: 0px; แสดง: Inline-Block; ความกว้าง: 0px; ความสูง: 0px; ชายแดนซ้าย: 0px; ชายแดนด้านบน: 6px ของแข็งโปร่งใส; ชายแดนขวา: 8px Solid #999; ขอบด้านล่าง: 6px ของแข็งโปร่งใส; เคอร์เซอร์: ตัวชี้;}/*** ตั้งค่าไอคอนปุ่มเดือนถัดไป*/. ปฏิทิน. next-month {ตำแหน่ง: สัมบูรณ์; ด้านบน: 12px; ขวา: 0px; แสดง: Inline-Block; ความกว้าง: 0px; ความสูง: 0px; ชายแดนขวา: 0px; ชายแดนด้านบน: 6px ของแข็งโปร่งใส; ชายแดนซ้าย: 8px Solid #999; ขอบด้านล่าง: 6px ของแข็งโปร่งใส; เคอร์เซอร์: ตัวชี้;}/* ตั้งค่ารูปแบบตารางปฏิทิน*/. ปฏิทิน-ตาราง {ความกว้าง: 100%; การล่มสลายของชายแดน: การล่มสลาย; TEXT-ALGING: CENTER;}/* ความสูงของสายตาราง*/. ปฏิทิน-ตาราง tr {ความสูง: 30px; LINE-HEIGHT: 30PX;}/* วันปัจจุบันสีแสดงการแสดงผลพิเศษ*/. วันปัจจุบัน {สี: สีแดง;}/* สีข้อความเดือนนี้*/. CurrentMonth {สี: #999;}/* เดือนอื่น ๆโดยทั่วไปไม่มีอะไรจะพูดเกี่ยวกับการตั้งค่าสไตล์การตั้งค่าง่าย ๆ ตัวอย่างเช่นอันพิเศษคือไอคอนที่แสดงถึง "เดือนที่แล้ว" และ "เดือนหน้า" ซึ่งใช้การวางตำแหน่งสัมบูรณ์และใช้แอตทริบิวต์ชายแดนใน CSS เพื่อกำหนดรูปแบบ
วัตถุวันที่ JavaScript
ก่อนที่จะเริ่มรหัส JS อย่างเป็นทางการคุณต้องเข้าใจวัตถุวันที่ใน JS ผ่านวัตถุวันที่คุณสามารถรับข้อมูลเช่นปีเดือนวันเวลาและการประทับเวลา สำหรับการอ้างอิงเฉพาะ: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = วันที่ใหม่ (); // รับเวลาระบบปัจจุบันเวลาปัจจุบันของฉันคือวันจันทร์ที่ 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 ประเภทวันที่ที่ได้รับจะคำนวณโดยอัตโนมัติ 1 พฤษภาคม หากมีการตั้งค่าเป็น 0 JS จะดำเนินการเป็นวันที่ 30 เมษายนดังนั้น 1 พฤษภาคมคือวันที่ 29 เมษายน
var d3 = วันที่ใหม่ (2016, 3, 30); d3.tolocaledatestring (); // "2016/4/30" var d4 = วันที่ใหม่ (2016, 3, 31); d4.tolocaledatestring (); // "2016/5/1" var d5 = วันที่ใหม่ (2016, 3, 33); d5.TolocalEdatestring (); // "2016/5/3" var d6 = วันที่ใหม่ (2016, 4, 1); d6.tolocaledatestring (); // "2016/5/1" var d7 = วันที่ใหม่ (2016, 4, 0); d7.tolocaledatestring (); // "2016/4/30" var d8 = วันที่ใหม่ (2016, 4, -3); d8.tolocaledatestring (); // "2016/4/27"
จาวาสคริปต์
หลังจากทำความเข้าใจกับการใช้งานพื้นฐานของวัตถุวันที่ใน JS ขั้นตอนต่อไปคือส่วนการใช้งานรหัส แนวคิดโดยรวมมีดังนี้: กำหนดตัวแปร dateobj ทั่วโลกเพื่อบันทึกข้อมูลปีและเดือนที่ต้องแสดงในตาราง เนื้อหาในชื่อเรื่องจะขึ้นอยู่กับ dateobj วันที่ในตารางจะใช้ข้อมูลทั้งหมดของหมายเลข 1 ที่สอดคล้องกับปีและเดือนใน DateObj จากนั้นกำหนดตำแหน่งหมายเลข 1 ในแถวแรกของตารางเพื่อย้อนกลับข้อมูลของสองสามวันสุดท้ายของเดือนก่อนหน้าและข้อมูลของเดือนนี้และเดือนถัดไปจะถูกผลักกลับ
ขั้นตอนเฉพาะ:
1. ประกาศตัวแปร dateObj และกำหนดค่าเริ่มต้นให้กับเวลาระบบปัจจุบัน
2. แสดงองค์ประกอบ HTML ในปฏิทิน div
3. รับข้อมูลในวันที่ 1 ของเดือนถึง DateObj และใช้เพื่อสำรวจวันที่ทั้งหมดในตาราง
4. ผูกกิจกรรมสำหรับเดือนก่อนหน้าและเดือนถัดไปไอคอน
(function () { /** ใช้ในการบันทึกวันที่เมื่อแสดงมันจะแสดงตามปีและเดือนของวันที่ใน dateObj* / var dateObj = (function () {var _date = วันที่ใหม่ (); // ค่าเริ่มต้นเป็นเวลาส่งคืนระบบปัจจุบัน // ตั้งค่า HTML ในปฏิทิน div renderhtml (); ตั้งชื่อของเดือนก่อนหน้า var bodybox = document.createelement ("div"); id = 'calendartitle'> </span> " +" <span id = 'nextmonth' class = 'next-month'> </span> "; calendar.appendChild (กล่องชื่อ); // เพิ่มลงในปฏิทิน div // set โครงสร้าง html ของ table area.lassname = 'calendar-body-body-body-body-body + "<th> หนึ่ง </th>" + "<th> สอง </th>" + "<th> สาม </th>" + "<th> สี่ </th>" + "<th> ห้า </th> = 0; i <6; "<td> </td>" + "<td> </td>" + "</tr>"; ในตารางและตั้งค่าชื่อคลาส*/ ฟังก์ชั่น showcalendardata () {var _year = dateobj.getdate (). getUtyear (); document.getElementById ("ปฏิทิน"); _table.getElementByTagname ("TD"); _thisdaystr = getDatestr (_Thisday); day_tds [i] .classname = 'วันปัจจุบัน'} ถ้า (_thisdaystr.substr (0, 6) == getdatestr (_firstday) .substr (0, 6)) {_tds [i]. }} *** ผูกมัดเหตุการณ์ของเดือนก่อนหน้า* / ฟังก์ชั่น bindevent () {var prevmonth = document.getElementById ("prevmonth"); addevent (dom, etype, func) {ถ้า (dom.addeventListener) {// dom 2.0 dom.addeventListener (etype, ฟังก์ชั่น (e) {func (e);}); } else {// dom 0 dom ['on' + etype] = function (e) {func (e);}}} / ** * คลิกที่ไอคอนของเดือนที่แล้ว showcalendardata (); เดือนที่ 2 บิต*/ ฟังก์ชั่น getDatest + _D): ("0" + _D);ในตัวอย่างนี้เหตุการณ์เมื่อคลิกวันที่ในตารางจะไม่ถูกเพิ่ม คุณสามารถเพิ่มรหัสต่อไปนี้ลงในฟังก์ชั่น bindevent เพื่อรับข้อมูลเกี่ยวกับวันที่คลิก
var table = document.getElementById ("ปฏิทิน"); var tds = table.getElementsByTagname ('td'); สำหรับ (var i = 0; i <tds.length; i ++) {addevent (tds [i], 'คลิก', ฟังก์ชัน (e) {console.logข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น