最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，效果如下：
单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。
一、html代码
<h1>学习计划</h1>
<div class="month">
<ul>
<li class="prev"><上月</li>
<li class="next">下月></li>
<li style="text-align:center"><span id="monthbox">10月</span><br>
<span style="font-size:18px" id="yearbox">2023年</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ul>
<ul class="days"></ul>
这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。
二、CSS代码
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.month {padding: 70px 25px;width: 100%;background: #1abc9c;}
.month ul {margin: 0;padding: 0;}
.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;}
.month .prev {float: left;padding-top: 10px;cursor: pointer;}
.month .next {float: right;padding-top: 10px;cursor: pointer;}
.weekdays {margin: 0;padding: 10px 0;background-color: #ddd;}
.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;}
.days {padding: 10px 0;background: #eee;margin: 0;}
.days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;}
.days li .active {padding: 5px;background: #1abc9c;color: white !important}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}
@media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}
@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}
这段代码主要定义了日历的样式，一个主要的方法简述如下：
- box-sizing：border-box;就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
- @media screen and (max-width:720px) 。表示当浏览器的可视区域小于720px时候，执行。
三、Javascript代码
<script type="text/javascript">
var currentDate=new Date();
function showDateList(){
let year = currentDate.getFullYear();
let month = currentDate.getMonth()+1;
let date = currentDate.getDate();
let firstWeekDay = new Date(year,month-1,1).getDay();
let monthDays = new Date(year,month,0).getDate();
let str="";
let daylength = monthDays+firstWeekDay-1;
let startDay = firstWeekDay-1
if(firstWeekDay==0) {
daylength =monthDays+6;
startDay=6;
}
for (var i = 0; i <daylength ; i++) {
if(i<startDay)
{
str +="<li></li>"
}
else
{
let today = new Date();
let todate =(i-startDay+1);
console.log(date)
if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate())
{
str +="<li><span class='active'>"+todate+"</span></li>";
}
else{
str +="<li>"+todate+"</li>";
}
}
}
document.querySelector("#monthbox").innerHTML=month+"月";
document.querySelector("#yearbox").innerHTML=year+"年";
document.querySelector(".days").innerHTML=str;
}
showDateList();
document.querySelector(".next").onclick= function(){
currentDate.setMonth(currentDate.getMonth() + 1);
showDateList();
}
document.querySelector(".prev").onclick= function(){
currentDate.setMonth(currentDate.getMonth() - 1);
showDateList();
}
</script>
此段代码实现了当月日历情况，单击上月、下月进行月份切换。
这样我们的日历就成型了，完整代码如下，请参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style>
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.month {padding: 70px 25px;width: 100%;background: #1abc9c;}
.month ul {margin: 0;padding: 0;}
.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;}
.month .prev {float: left;padding-top: 10px;cursor: pointer;}
.month .next {float: right;padding-top: 10px;cursor: pointer;}
.weekdays {margin: 0;padding: 10px 0;background-color: #ddd;}
.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;}
.days {padding: 10px 0;background: #eee;margin: 0;}
.days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;}
.days li .active {padding: 5px;background: #1abc9c;color: white !important}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}
@media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}
@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}
</style>
</head>
<body>
<h1>学习计划</h1>
<div class="month">
<ul>
<li class="prev"><上月</li>
<li class="next">下月></li>
<li style="text-align:center"><span id="monthbox">10月</span><br>
<span style="font-size:18px" id="yearbox">2023年</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ul>
<ul class="days"></ul>
<script type="text/javascript">
var currentDate=new Date();
function showDateList(){
let year = currentDate.getFullYear();
let month = currentDate.getMonth()+1;
let date = currentDate.getDate();
let firstWeekDay = new Date(year,month-1,1).getDay();
let monthDays = new Date(year,month,0).getDate();
let str="";
let daylength = monthDays+firstWeekDay-1;
let startDay = firstWeekDay-1
if(firstWeekDay==0) {
daylength =monthDays+6;
startDay=6;
}
for (var i = 0; i <daylength ; i++) {
if(i<startDay)
{
str +="<li></li>"
}
else
{
let today = new Date();
let todate =(i-startDay+1);
console.log(date)
if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate())
{
str +="<li><span class='active'>"+todate+"</span></li>";
}
else{
str +="<li>"+todate+"</li>";
}
}
}
document.querySelector("#monthbox").innerHTML=month+"月";
document.querySelector("#yearbox").innerHTML=year+"年";
document.querySelector(".days").innerHTML=str;
}
showDateList();
document.querySelector(".next").onclick= function(){
currentDate.setMonth(currentDate.getMonth() + 1);
showDateList();
}
document.querySelector(".prev").onclick= function(){
currentDate.setMonth(currentDate.getMonth() - 1);
showDateList();
}
</script>
</body>
</html>
