JS自制极简日历Demo
这个日历界面不属于任何插件，纯粹用最基本的JS函数获取到每一个位置对应的日期，而后再经过遍历拼接table表单的方式赋值到HTML里面进行展现，日历效果的显示，其中使用到的文件只须要一个Jquery的JS文件便可实现以下效果：javascript
Demo只是一个简单的日历模板，没有太多函数和限制，开发人员能够基于本身的想法在里面任意更改css
下列是JS代码：html
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () { //获取当前日期及其年月 var todate=new Date(); var year=todate.getFullYear();//当前年份 var month=todate.getMonth()+1;//当前月份 $("#tdtitle").html(year+"年"+month+"月"); //传入ID定义初始化方法 InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass'); }); //初始化方法 function InitialMethod(tabID, year, month, style, tdclass) { //获取月份的第一天 var MonthOne = new Date(year + '/' + month + '/01'); //获取第一天是星期几 var weekOne = MonthOne.getDay(); //几天前 var AgoDay = (weekOne) * (-1); //当月最大日期的索引 var MaxDay = getCountDays(MonthOne)-1; //当前日期 var today = getToday(); var strhtml; var countNum = 0; //6行 7列 for (var i = 0; i < 6; i++) { strhtml += "<tr class='" + style + "'>"; for (var j = 0; j < 7; j++) { var sum = AgoDay + countNum; if (sum < 0 || sum > MaxDay) { strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>"; } else if (ReturnDay(sum,MonthOne) == today) { strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>"; } else { strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>"; } countNum++; } strhtml+="</tr>"; } tabID.html(strhtml); } //几天前/后的日期 function ReturnDay(day,OneDate) { var time = new Date(OneDate); time.setDate(time.getDate() + day);//获取Day天后的日期 var y = time.getFullYear(); var m = time.getMonth() + 1;//获取当前月份的日期 var d = time.getDate(); return d; } //当月有多少天 function getCountDays(time) { var curDate = new Date(time); /* 获取当前月份 */ var curMonth = curDate.getMonth(); /* 生成实际的月份: 因为curMonth会比实际月份小1, 故需加1 */ curDate.setMonth(curMonth + 1); /* 将日期设置为0, 这里为何要这样设置, 我不知道缘由, 这是从网上学来的 */ curDate.setDate(0); /* 返回当月的天数 */ return curDate.getDate(); } //当前日期 function getToday() { var time = new Date(); var today = time.getDate(); return today; } </script>
HTML代码：java
<body>
<div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
<table id="concent" class="tableclass">
<tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
<tr style="height:5%">
<td class="tdclass">星期天</td>
<td class="tdclass">星期一</td>
<td class="tdclass">星期二</td>
<td class="tdclass">星期三</td>
<td class="tdclass">星期四</td>
<td class="tdclass">星期五</td>
<td class="tdclass">星期六</td>
</tr>
<tbody id="tbTypesetting"></tbody>
</table>
</div>
</body>
Demo的完整代码：jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.tableclass
{
width:100%; clear:both; font-size: 12px; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-collapse: collapse; } .trclass { height:50px; } .tdclass { border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; background-color:#ffffff; } </style> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript"> $(function () { //获取当前日期及其年月 var todate=new Date(); var year=todate.getFullYear();//当前年份 var month=todate.getMonth()+1;//当前月份 $("#tdtitle").html(year+"年"+month+"月"); //传入ID定义初始化方法 InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass'); }); //初始化方法 function InitialMethod(tabID, year, month, style, tdclass) { //获取月份的第一天 var MonthOne = new Date(year + '/' + month + '/01'); //获取第一天是星期几 var weekOne = MonthOne.getDay(); //几天前 var AgoDay = (weekOne) * (-1); //当月最大日期的索引 var MaxDay = getCountDays(MonthOne)-1; //当前日期 var today = getToday(); var strhtml; var countNum = 0; //6行 7列 for (var i = 0; i < 6; i++) { strhtml += "<tr class='" + style + "'>"; for (var j = 0; j < 7; j++) { var sum = AgoDay + countNum; if (sum < 0 || sum > MaxDay) { strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>"; } else if (ReturnDay(sum,MonthOne) == today) { strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>"; } else { strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>"; } countNum++; } strhtml+="</tr>"; } tabID.html(strhtml); } //几天前/后的日期 function ReturnDay(day,OneDate) { var time = new Date(OneDate); time.setDate(time.getDate() + day);//获取Day天后的日期 var y = time.getFullYear(); var m = time.getMonth() + 1;//获取当前月份的日期 var d = time.getDate(); return d; } //当月有多少天 function getCountDays(time) { var curDate = new Date(time); /* 获取当前月份 */ var curMonth = curDate.getMonth(); /* 生成实际的月份: 因为curMonth会比实际月份小1, 故需加1 */ curDate.setMonth(curMonth + 1); /* 将日期设置为0, 这里为何要这样设置, 我不知道缘由, 这是从网上学来的 */ curDate.setDate(0); /* 返回当月的天数 */ return