ฉันอยากจะเขียนปฏิทินใน JavaScript มาก่อนเสมอ แต่เนื่องจากฉันไม่มีความคิดที่ดีเลยฉันจึงไม่ได้ลองมานานแล้ว เมื่อเร็ว ๆ นี้ฉันได้เห็นตัวอย่างของปฏิทินง่ายๆที่เขียนด้วย JavaScript บนอินเทอร์เน็ต แม้ว่ารหัสจะไม่ใหญ่ แต่ฉันคิดว่ามันอธิบายหลักการดำเนินการของปฏิทิน JS ได้ดี ฉันยังลองและได้รับมาก หลังจากเรียนรู้หลักการการใช้งานพื้นฐานฉันต้องการเพิ่มฟังก์ชั่นเพิ่มเติมและสามารถเล่นได้อย่างอิสระ ให้ฉันแบ่งปันที่นี่ก่อน หากคุณสนใจคุณสามารถลองได้!
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 มิฉะนั้นคืน 0Function 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);
สิ่งนี้ทำให้มั่นใจได้ว่าจำนวนวันที่ถูกต้องจะถูกนำออกมาทั้งในปีธรรมดาและปีกระโดด รหัสต่อไปนี้ใช้เพื่อรับข้อมูลที่เกี่ยวข้องสำหรับวันนี้:
var วันนี้ = วันที่ใหม่ (), // รับวันที่ปัจจุบัน y = วันนี้ getulyear (), // รับปีในวันที่ m = วันนี้ getMonth (), // รับเดือนในวันที่ (ควรสังเกตว่าเดือนที่คำนวณจากวันที่สูงกว่าวันที่ 1 วันแรก = วันใหม่ (y, m, 1), // รับวันแรกของเดือน dayofweek = firstday.getday (), // ตัดสินวันของสัปดาห์ (กลับไปที่หนึ่งใน [0-6], 0 หมายถึงวันอาทิตย์ 1 หมายถึงวันจันทร์และอื่น ๆ ) วันที่ 31, 31, 31, 31, 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 และการเรนเดอร์มีดังนี้:
บทความข้างต้น "ผลกระทบของปฏิทินง่าย ๆ ในวันที่เขียน JS" เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น