<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0; list-style: none; } li.disabled { background: #eee; color: #ccc; cursor: not-allowed; } .container { border: 1px solid #ccc; margin: 50px; width: 350px; } .container li { width: 50px; height: 50px; text-align: center; line-height: 50px; cursor: pointer; } .container li:not(.disabled):hover { background: rgb(185, 238, 238); } .container ul { display: flex; flex-wrap: wrap; } li.active { background: darkcyan; color: #fff; </style> </head> <body> <button class="prev"> </button class="next"> </button> <div class="container"> <ul> < li >, < / li > < li > a < / li > < li > 2 < / li > < li > three < / li > < li > 4 < / li > < li > five < / li > < li > 6 < / li > < / ul > < ul class = 'content' > < / ul > < / div > < script SRC = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" > < / script > < script > $(function () {let totalDays = 0 let now = new Date() let today = now.getDate() let global_month = now.getMonth() + 1 let global_year = now.getFullYear() $('.prev').click(function () { (now.getMonth() - 1) //6-31 7-1now.setMonth initCalendar() }) $('.next').click(function () { now.setMonth(now.getMonth() + 1) //6-31 7-1 initCalendar() }) function initCalendar() { $('.content').empty() let month = now.getMonth() + 1 let year = now.getFullYear() switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: totalDays = 31 break; case 4: case 6: case 9: case 11: totalDays = 30 break default: if ((year % 4 === 0 && year % 100 ! == 0) || year % 400 === 0) { totalDays = 29 } else { totalDays = 28 } break; } for (let i = 1; i <= totalDays; i++) { let li = $('<li/>').text(i) if (i === today && year === global_year && month === global_month) li.addClass('active') $('.content').append(li) } now.setDate(1) let firstDay = now.getDay() for (let i = 0; i < firstDay; i++) { now.setDate(now.getDate() - 1) let li = $('<li/>').text(now.getDate()).addClass('disabled') $('.content').prepend(li) } now.setDate(now.getDate() + firstDay) now.setDate(totalDays) let lastDay = 6 - now.getDay() for (let i = 0; i < lastDay; i++) { now.setDate(now.getDate() + 1) let li = $('<li/>').text(now.getDate()).addClass('disabled') $('.content').append(li) } now.setDate(now.getDate() - lastDay) now.setDate(1) } initCalendar() }) </script> </body> </html>Copy the code