当前位置：首页 > news >正文

CSS+Javascript+Html日历控件

news 2025/7/15 19:27:58

最近，因需要用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>