7

简易的日历 1. css代码

<style> * { margin: 0; padding: 0; } li { list-style: none; } .container { border: 1px solid #ccc; height: auto; width: 350px; margin: 30px auto; user-select: none; position: relative; } .container ul { display: flex; flex-wrap: wrap; justify-content: start; align-items: center; } .container li { width: 50px; height: 50px; text-align: center; line-height: 50px; cursor: pointer; } .container li:not(.disabled):hover { background-color: aqua; color: white; } .active { background-color: aqua; color: white; } li.disabled { background-color: #ccc; color: white; cursor: not-allowed; } .prov { position: absolute; top: 15px; left: 0; background-color: gold; color: white; } .next { position: absolute; top: 15px; right: 0; background-color: gold; color: white; } .time { position: absolute; top: -20px; left: 40%; } </style>

2. html代码

<div class="container"> <div class="prov"><</div> <div class="time">2020/12/12</div> <ul> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <div class="next">></div> <ul class="content"> </ul> </div>

3.jq代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//引入jq包 <script> $(function () { let now = new Date(); let totledays = 0; let today = now.getDate(); let now_year = now.getFullYear(); let now_month = now.getMonth(); $(".time").html(`${now_year} / ${now_month} / ${today}`) $(".prov").click(function () { now.setMonth(now.getMonth() - 1) init(); }) $(".next").click(function () { now.setMonth(now.getMonth() + 1) init(); }) function init() { $(".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: totledays = 31; break; case 4: case 6: case 9: case 11: totledays = 30; break; default: if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) totledays = 29; else totledays = 28; break } // console.log(totledays); console.log(year + "/" + month + "/" + totledays); // 填充当月所有天 for (let i = 1; i <= totledays; i++) { let li = $("<li/>").html(i); today === i && li.addClass("active"); // if (today === i) li.addClass("active"); $(".content").append(li); } // 前补 now.setDate(1); let provdays = now.getDay(); // console.log(provdays); for (let i = 0; i < provdays; i++) { now.setDate(now.getDate() - 1) $(".content").prepend($("<li/>").html(now.getDate()).addClass("disabled")) } // 后补 now.setDate(now.getDate() + provdays); now.setDate(totledays); let nextdays = 6 - now.getDay(); for (let i = 0; i < nextdays; i++) { now.setDate(now.getDate() + 1); $(".content").append($("<li/>").html(now.getDate()).addClass("disabled")) } now.setDate(now.getDate() - nextdays); now.setDate(1) // console.log(now.getDate()); } init(); }) </script>

4.运行结果