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