คำก่อนหน้านี้
ปฏิทินอย่างง่ายเป็นแอปพลิเคชั่นทั่วไปของวัตถุวันที่ใน JavaScript และมีการใช้งานที่หลากหลาย บทความนี้จะอธิบายรายละเอียดเกี่ยวกับแนวคิดการใช้งานของปฏิทินง่ายๆ
การสาธิตผล
คำอธิบาย html
ใช้สองอินพุตของประเภท = หมายเลขเป็นตัวควบคุมอินพุตสำหรับปีและเดือนตามลำดับเพื่อให้ปุ่มปรับรวมอยู่ในเบราว์เซอร์ขั้นสูง
จัดสัปดาห์ตามลำดับตั้งแต่วันอาทิตย์ถึงวันจันทร์
<div> <header class = 'control'> <input id = "conyear" type = "number" min = "1900" max = "2100" step = "1"/> <อินพุต id = "conmonth" type = "number" min = "1" max = "12" ขั้นตอน = "1"/> <div> tue </div> <div> วันพฤหัสบดี </div> <div> วันศุกร์ </div> <div> วันเสาร์ </div> </header> <ส่วน id = 'daybox'> <div id = "day1"> 1 </div> <div> </div> </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> </div> 14 </div> </div> 15 </div> </div> 16 </div> </div> <div> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> </div> 29 </div> <div id = "Day30"> 30 </div>
คำอธิบาย CSS
สำหรับการดำเนินการตามปฏิทินที่เรียบง่ายก่อนกำหนดการจัดเรียงของ divs ของ class = "วัน" ในปฏิทินที่จะลอย สิ่งนี้จะช่วยให้ divs ทั้งหมดในระดับเดียวกันสามารถติดตามการเคลื่อนไหวโดยการเปลี่ยนตำแหน่งของ divs วันแรก
ร่างกาย {มาร์จิ้น: 0;} อินพุต {เส้นขอบ: ไม่มี; Padding: 0;}. Box {Width: 354px; มาร์จิ้น: 30px auto 0; } .dateBox {ความสูง: 300px; ชายแดน: 2px Solid Black;} .week {Overflow: Hidden; ขอบด้านล่าง: 1px Solid Black; Line-Height: 49px;}. Week-in {ความสูง: 49px; ลอย: ซ้าย; ความกว้าง: 50px; TEXT-ALIGN: CENTER;}. DayBox {Overflow: HIDDEN;}. วัน {Float: ซ้าย; ความสูง: 50px; ความกว้าง: 50px; แบบอักษร: 20px/50px 'Microsoft Yahei'; TEXT-ALGING: CENTER;}. การควบคุม {ล้น: ซ่อน;}. con-in {ความสูง: 50px; ลอย: ซ้าย; ความกว้าง: 100px; TEXT-ALIGN: CENTER; ตัวอักษร: 20px/50px "Microsoft Yahei";}คำอธิบาย JS
จำเป็นต้องมีการใช้งานทั้งหมด 5 ครั้งสำหรับตรรกะ JS ของปฏิทินง่าย ๆ :
【 1 】คุณต้องได้รับจำนวนวันของเดือนและวันแรกของวันแรกวันที่ 30 และวันที่ 31 คือสัปดาห์
【 2 】ตามสัปดาห์ของวันแรกของเดือนเปลี่ยนค่าระยะขอบซ้ายของวันแรกและย้ายวันแรกไปยังตำแหน่งที่สอดคล้องกัน; เนื่องจากความสัมพันธ์แบบลอยตัวส่วนที่เหลือของวันจะย้ายไปยังตำแหน่งที่สอดคล้องกันเช่นกัน
【 3 】ซ่อนวันพิเศษตามจำนวนวันในเดือน แน่นอนว่าวันที่อาจซ่อนอยู่ในเดือนอื่น ๆ ควรแสดงก่อนที่จะซ่อน
[4] หากวันที่ 30 ของเดือนคือวันอาทิตย์จะมีการครอบครองบรรทัดใหม่ ในเวลานี้โดยการเปลี่ยนค่ามาร์จิ้นของวันที่ 30 มันจะถูกย้ายไปยังบรรทัดแรก (ถ้าวันที่ 31 อาจครอบครองบรรทัดใหม่การรักษาที่คล้ายกันจะทำ)
【 5 】หลังจากโหลดหน้ารับปีและเดือนปัจจุบันเพื่อแสดงปฏิทินของเดือนปัจจุบัน เมื่อเปลี่ยนปีหรือเดือนรับค่าที่เปลี่ยนแปลงและอัปเดตปฏิทิน
// การเตรียมการ: รับฟังก์ชั่นสไตล์ปัจจุบัน getcss (obj, style) {ถ้า (window.getComputedStyle) {return getComputedStyle (OBJ) [สไตล์]; } return obj.currentstyle [style];} // การใช้งาน 1: รับจำนวนวันของเดือนและวันของสัปดาห์ในวันแรก, 30 และ 31 ของฟังก์ชันฟังก์ชั่น get_data (ปี, เดือน) {ผลลัพธ์ var = {}; var d = วันที่ใหม่ (); // ถ้าเป็นกุมภาพันธ์ถ้า (เดือน == 2) {// ถ้าเป็นปีกระโดดถ้า ((ปี % 4 === 0 && ปี % 100! == 0) || ปี 400 === 0) {result.days = 29; // ถ้าเป็นปีทั่วไป} else {result.days = 28; } // ถ้าเป็นวันที่ 4, 6, 9 และพฤศจิกายน} อื่นถ้า (เดือน == 4 || เดือน == 6 || เดือน == 9 || เดือน == 11) {result.days = 30; } else {result.days = 31; // วันที่ 31 ของเดือนเป็นผลงานสัปดาห์วันที่ 31week = D.GetDay (D.Setualear (ปี, เดือน -1,31)); } // วันแรกของเดือนคือผลลัพธ์ของสัปดาห์วันที่ 1week = D.GetDay (D.Setualear (ปี, เดือนที่ 1,1)); ถ้า (เดือน! = 2) {// วันที่ 30 ของเดือนคือผลลัพธ์ของสัปดาห์วันที่ 30week = D.Getday (D.Setualedear (ปี, เดือน -1,30)); } ผลตอบแทนผลลัพธ์;} // การใช้งาน 2: ตามสัปดาห์ x ของวันแรกของเดือนตั้งค่าระยะขอบซ้ายของวันแรก = ความกว้าง *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 วัน = get_data (ปี, เดือน). วัน; สำหรับ (var i = days; i <31; i ++) {daybox.children [i] .style.display = 'ไม่มี'; }}; // การใช้งาน 4: หากวันที่ 30 หรือ 31 ของเดือนคือวันอาทิตย์แถวใหม่จะถูกครอบครอง ย้ายวันที่เพิ่งถูกครอบครองใหม่ไปยังแถวแรกโดยการตั้งค่าฟังก์ชั่นด้านบนสุด move_day30 (ปี, เดือน) {// ถ้าวันที่ 30 ของเดือนคือวันอาทิตย์ถ้า (get_data (ปี, เดือน) .day30week === 0) {day30.style.margintop = parseint day31.style.margintop = parseint (getCss (day31, 'ความสูง')) *(-5) + 'px'; day31.style.margintop = parseint (getCss (day31, 'ความสูง')) *(-5) + 'px'; day31.style.marginleft = getcss (day31, 'ความกว้าง'); กลับ; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // ถ้าวันที่ 31 ของเดือนคือวันอาทิตย์ถ้า (get_data (ปี, เดือน) .day31week === 0) {day31.style.margintop = parseint (getcss (day31, 'ความสูง')) *(-5) + 'px'; } else {day31.style.margintop = '0'; }} // การใช้งาน 5: เมื่อโหลดหน้ารับปีและเดือนปัจจุบันแสดงปฏิทินเดือนปัจจุบัน เมื่อเปลี่ยนปีหรือเดือนให้ได้รับการเปลี่ยนแปลงปีและเดือนปฏิทินปี var ปี = conyear.value = วันที่ใหม่ (). getRayLeear (); var month = conmonth.Value = วันที่ใหม่ (). getMonth () + 1; Move_day1 (ปี, เดือน); Hide_days (ปี, เดือน); Conyear.Value; var month = conmonth.value; if (ปี <1900 || ปี> 2100) {ปี = conyear.value = วันที่ใหม่ (). getGreyEar (); } if (เดือน <1 || เดือน> 12) {month = conmonth.value = วันที่ใหม่ (). getMonth () + 1; } move_day1 (ปี, เดือน); hide_days (ปี, เดือน); move_day30 (ปี, เดือน);}การสาธิตซอร์สโค้ด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น