1. ปัญหาการนับแถวตาราง
เนื่องจากคุณต้องการแสดงตารางวันที่คุณต้องทราบก่อนว่ามีกี่แถวและคอลัมน์ที่มีอยู่ในตารางนี้ จำนวนคอลัมน์ได้รับการพิจารณาโดยมีทั้งหมด 7 คอลัมน์จากวันอาทิตย์ (คอลัมน์แรกในปฏิทินคือวันอาทิตย์) ถึงวันเสาร์ ก่อนที่จะแก้ปัญหาการนับแถวคุณต้องรู้ก่อนว่าวันแรกของวันแรกของเดือนคือเพราะวันแรกของแต่ละเดือนไม่ได้เริ่มจากวันอาทิตย์ในปฏิทิน อาจเป็นวันศุกร์และวันเสาร์ดังนั้นส่วนซ้ายของที่ 1 จะต้องถูกแทนที่ด้วยตารางที่ว่างเปล่า ดังนั้นควรใช้ตารางเปล่ากี่ตารางแทน? ที่นี่เราต้องใช้วิธี getday () ซึ่งส่งคืนตัวเลขในอาร์เรย์ [0-6], 0 หมายถึงวันอาทิตย์ 1 หมายถึงวันจันทร์ 2 หมายถึงวันอังคารและอื่น ๆ ดังนั้นหาก 1st ของเดือนคือวันศุกร์จำเป็นต้องใช้แบบฟอร์มว่างเปล่า 5 แบบเพื่อแทนที่ทางด้านซ้าย จากนั้นหากมี 31 วันในหนึ่งเดือนจำนวนแถวสุดท้ายที่จะพบคือ:
var tr_nums = math.ceil ((5 + 31)/7);
แน่นอนว่าไม่ใช่ทุกเดือนคือ 31 วันดังนั้นเราต้องสร้างอาร์เรย์ 12 เดือนแต่ละองค์ประกอบแสดงจำนวนวันในแต่ละเดือน อย่างไรก็ตามกุมภาพันธ์ค่อนข้างพิเศษ มี 29 วันในเดือนกุมภาพันธ์ในปีกระโดดและเพียง 28 วันในเดือนกุมภาพันธ์ในปีปกติ ดังนั้นก่อนที่จะสร้างอาร์เรย์คุณต้องสร้างฟังก์ชั่นที่ผู้พิพากษาก้าวกระโดดหลายปีด้วยตัวเอง:
// ถ้าปีปัจจุบันสามารถหารได้ 4 แต่ไม่สามารถหารได้ 100 หรือสามารถหารได้ 400 มันสามารถกำหนดได้เป็นปีกระโดดกลับ 1, มิฉะนั้นส่งคืน 0 ฟังก์ชั่น isleap (ปี) {คืนปี 4 == 0? (ปี % 100! = 0? 1: (ปี % 400 == 0? 1: 0)): 0; -จากนั้นเราสร้างอาร์เรย์ของเดือน:
var days_per_month = อาร์เรย์ใหม่ (31, 28 + isleap (ปี), 31, 30, 31, 30, 31, 31, 30, 31, 31, 30, 31); สิ่งนี้ทำให้มั่นใจได้ว่าจำนวนวันที่ถูกต้องจะถูกนำออกมาทั้งในปีธรรมดาและปีกระโดด รหัสต่อไปนี้ใช้เพื่อรับข้อมูลที่เกี่ยวข้องเกี่ยวกับวันนี้: var วันนี้ = new Date (), // รับวันที่ปัจจุบัน y = วันนี้ getulyear (), // รับปีในวันที่ m = วันนี้ getMonth (), // รับเดือนในวันที่ (ควรสังเกตว่าวันนี้ อำนวยความสะดวกในการเน้นวันเมื่อสร้างตารางวันที่) วันแรก = วันใหม่ (y, m, 1), // รับวันแรกของเดือน dayofweek = firstday.getday (), // ตัดสินวันของสัปดาห์ (กลับหนึ่งใน [0-6], 0 หมายถึงวันอาทิตย์ 1, 31, 31, 31, 31, 31, 31, 31, 31, 30, 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // สร้างอาร์เรย์เดือน
ดังนั้นในที่สุดคุณจะได้รับจำนวนแถวของตารางที่จำเป็นสำหรับเดือน:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // กำหนดจำนวนแถวที่จำเป็นสำหรับตารางวันที่
2. พิมพ์ตารางปฏิทิน
ตารางตัวเองเป็นอาร์เรย์สองมิติดังนั้นให้มาสเตอร์ออกมาและเรียกใช้ลูปสองลูปให้เสร็จสมบูรณ์ รหัสมีดังนี้:
สำหรับ (i = 0; i <str_nums; i += 1) {// เลเยอร์แรกสำหรับลูปสร้างเอกสาร TR TAG.WRITE ('<tr>'); สำหรับ (k = 0; k <7; k ++) {// เลเยอร์ที่สองสำหรับลูปสร้างแท็ก td var idx = 7 * i+k; // สร้างดัชนีสำหรับแต่ละตารางเริ่มจาก 0 var date = idx - dayofweek + 1; // จับคู่ที่ 1 ของเดือนกับสัปดาห์ // ทำอย่างอื่น} document.write ('</tr>'); -3. แนบรหัสปฏิทิน JS ที่สมบูรณ์
<script> // ตัดสินว่าปีปัจจุบันเป็นปีที่ก้าวกระโดด (มี 29 วันในเดือนกุมภาพันธ์ของปีกระโดดและเพียง 28 วันในเดือนกุมภาพันธ์ของปีปกติ) isleap (ปี) {ผลตอบแทนปี 4 == 0? (ปี % 100! = 0? 1: (ปี % 400 == 0? 1: 0)): 0; } var i, k, วันนี้ = วันที่ใหม่ (), // รับวันที่ปัจจุบัน y = วันนี้ getulyear (), // รับปีในวันที่ m = วันนี้ getMonth (), // รับเดือนในวันที่ (ควรสังเกตว่าวันที่: วันที่สูงกว่า ตารางวันที่) วันแรก = วันที่ใหม่ (y, m, 1), // รับวันแรกของเดือน dayofweek = firstday.getday (), // ตัดสินวันของสัปดาห์ (กลับหนึ่งใน [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, 30, 31, 30, 31, 31, 30, 31, 30, 31), // สร้างอาร์เรย์เดือน str_nums = math.ceil ((dayofweek + days_per_month [m]) /7); // กำหนดจำนวนแถวที่จำเป็นสำหรับเอกสารตารางวันที่เขียน ("<table cellpacing = '0'> <tr> <th> วัน </th> <th> สอง </th> <th> สอง </th> <th> สี่ </th> <th> หก </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; // จับคู่ที่ 1 ของเดือนกับสัปดาห์ (วันที่ <= 0 || วันที่> days_per_month [m])? วันที่ = '': วันที่ = idx - dayofweek + 1; // ดัชนีน้อยกว่าหรือเท่ากับ 0 หรือมากกว่าค่าสูงสุดของเดือนใช้ตารางว่างแทนวันที่ == d? document.write ('<td>' + วันที่ + '</td>'): document.write ('<td>' + วันที่ + '</td>'); // ไฮไลต์วัน} document.write ('</tr>'); } document.write ('</table>'); </script>มาเล่นได้อย่างอิสระในส่วน CSS เวลาปัจจุบันคือ 2 พฤษภาคม 2559 และการเรนเดอร์มีดังนี้:
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript