网站开发文档模板下载英文网站设计公司
最近，因需要用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-1if(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-1if(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>