关于js中日历的书写
从事前端时间也不算短了，最近公司项目中用到了日历，网上找了很多，也有很多好看的样式，今天自己一时兴起，也写一篇关于日历插件的书写，只是单纯的书写，没有考虑样式还有布局这些，作为一个前端没有考虑样式，耻辱呀，以后有时间改进一下，献丑一下。
需要引入jQery，方便进行dom操作。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手写原生的日历</title> 6 <link rel="stylesheet" href="calendar.css" /> 7 <script src="jquery-1.8.3.min.js"></script> 8 </head> 9 <body> 10 <div class="showDay"> 11 <span class="lastMonth">上一个月</span> 12 <span class="toDay"></span> 13 <span class="nextMonth">下一个月</span> 14 </div> 15 <div> 16 <span>显示具体时间：</span> 17 <span id="time"></span> 18 </div> 19 <table id="table"> 20 21 </table> 22 <script src="calendar.js"></script> 23 </body> 24 </html>
*{ margin:0; padding:0; } table{ border:1px solid black; } .inputDiv input[type="text"]{ border:1px solid black; width:240px; outline:none; height:40px; line-height:40px; } .trStyle{ border:1px solid red; }
核心js部分
// 日历书写 $(function(){ // var test=new Date(2018,8,32); // console.log(test.toLocaleDateString()); // 首先获取当前的日期 var date=new Date(); // 获取年月日（注意月份需要加1); var year=date.getFullYear(); var month=parseInt(date.getMonth()<10?'0'+(date.getMonth()+1):(date.getMonth()+1)); // 获取日历的1-31天的某一天 var day=parseInt(date.getDate()<10?'0'+date.getDate():date.getDate()); var toDay=`${year}年${month}月${day}日` $(".toDay").eq(0).text(toDay); // 获取小时，分钟和秒数 var hour=date.getHours()<10?"0"+date.getHours():date.getHours(); var min=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes(); var second=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds(); var careTime=`${hour}:${min}:${second}`; $("#time").text(careTime); // 这是获取星期几(注意0代表周日) var monday=date.getDay(); // 渲染当前月 calendar(year,month,day); // 上一个月 $(".lastMonth").on("click",lastTime); //下一个月 $(".nextMonth").on("click",nextTime); function lastTime(){ if(month<2){ month=12; year-=1; }else{ month-=1; }; calendar(year,month,day); } function nextTime(){ console.log(month); if(month>11){ month=1; year+=1; }else{ month+=1; } calendar(year,month,day); }; }); // 日历渲染 function calendar(year,month,day){ // 每个月的具体时间 var months=[31,28,31,30,31,30,31,31,30,31,30,31]; judgeYear(year,months); console.log(months); $(".toDay").text(`${year}年${month}月${day}日`); $("#table").empty(); var mondayTr=`<tr><td>周日</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> </tr>`; $("#table").append(mondayTr); // 需要获取当月第一天是星期几,然后做渲染(注意0代表周日); var firstDay=new Date(year,month-1,1).getDay(); var monthDay=months[month-1]; // 获取渲染的列数 var rowTr=Math.ceil((firstDay+monthDay)/7); var calenderCotent=""; for(var i=0;i<rowTr;i++){ calenderCotent+="<tr class='trStyle'>" for(var j=0;j<7;j++){ // 表示是该行最大的日历数 var idx=7*i+j; // 获取具体的号数 var dateStr=(idx-firstDay)+1; // 当超过日期的时候使用空格表示 (dateStr<=0||dateStr>monthDay?dateStr=(new Date(year,month-1,dateStr).getDate()<10?'0'+new Date(year,month-1,dateStr).getDate():new Date(year,month-1,dateStr).getDate()):(dateStr<10?dateStr="0"+dateStr:dateStr=dateStr)); calenderCotent+=`<td>${dateStr}</td>` } calenderCotent+="</tr>" } $("#table").append(calenderCotent); }; function judgeYear(year,months){ if(year%400==0){ return months[1]=29; }else{ if(year%100!=0&&year%4==0){ return months[1]=29; }else{ return } } };
好了，很多样式自己没有注意，发现日历并不是自己当初想的那么难，很多东西就怕自己认真。。。我总结一下日历需要注意的地方。
// 获取日历的1-31天的某一天
var day=parseInt(date.getDate()<10?'0'+date.getDate():date.getDate());
// 这是获取星期几(注意0代表周日)
var monday=date.getDay();
// 需要获取当月第一天是星期几,然后做渲染(注意0代表周日);
var firstDay=new Date(year,month-1,1).getDay();
for(var j=0;j<7;j++){
// 表示是该行最大的日历数
var idx=7*i+j;
// 获取具体的号数
var dateStr=(idx-firstDay)+1;
// 当超过日期的时候使用空格表示
(dateStr<=0||dateStr>monthDay?dateStr=(new Date(year,month-1,dateStr).getDate()<10?'0'+new Date(year,month-1,dateStr).getDate():new Date(year,month-1,dateStr).getDate()):(dateStr<10?dateStr="0"+dateStr:dateStr=dateStr));
calenderCotent+=`<td>${dateStr}</td>`
}
如果不需要说过上一个月的号数或者下一个月的号数，可以这样写，因为js有这个特性，如果当前月只有28号，你写29号自动转入下一个月
(dateStr<=0||dateStr>monthDays[month]?dateStr=" ":dateStr)
calderStr+=`<td>${dateStr}</td>`;
}
以上就是日历的全部了。
