纯js模仿windows系统日历
在网上看了几篇关于生成日历的js教程于是自己也整理了一个想法思路大家有什么建议欢迎提出
首先这个项目里面本人认为的几个难点：
1、如何定义每一个月的第一天位置
每个月的第一天都不是固定的星期几，所以第一天的输出需要动动脑筋把它放到对应的星期里面
2、每个月的最后一天有时候因为行数不够输出不了怎么办？
下面会有答案^_^
思路：
1、定义好每一个月份的日期天数
2、获取当前的系统日期初始化数据
3、输出日历
2.1、先获取当前月的第一天是星期几（这一点与日历的排版至关重要！）
2.2、获取当前月的天数
2.3、获取当前月有多少个星期（即要输出多少行行数这里我会预留多一行）
2.4、获取当前年份和月份用作显示
下面便是完整的代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>js日历</title>
<styletype="text/css">
*{
border:0;
padding:0;
margin:0;
font-family:"微软雅黑";
}
a{
text-decoration:none;
color:#000;
}
li{
list-style-type:none;
}
.calendar_wrap{
width:350px;
margin:0auto;
padding:0;
border:1pxsolid#000;
}
.calendar_list{
width:100%;
margin-top:10px;
}
.calendar_listtr{
width:100%;
}
.calendar_listtrtd{
text-align:center;
height:45px;
}
.control_bar{
word-spacing:-6px;
}
.control_barspan,.control_barb{
display:inline-block;
text-align:center;
word-spacing:0px;
}
.left-bt,.right-bt{
width:50px;
}
#reduce_bt,#add_bt{
width:50%;
height:25px;
border-radius:50%;
}
#reduce_bt:focus{
outline:none;
}
#add_bt:focus{
outline:none;
}
#current_date{
width:250px;
}
#resetBt{
display:block;
text-align:center;
color:#fff;
cursor:pointer;
width:120px;
line-height:40px;
background-color:#FF7F27;
margin:0auto;
}
#date_listtrtd:hover{
background-color:#ccc;
cursor:default;
}
</style>
</head>
<body>
<divclass="calendar_wrap">
<divclass="control_bar">
<spanclass="left-bt"><inputtype="button"id="reduce_bt"value="<"></span>
<bid="current_date">2017-02</b>
<spanclass="right-bt"><inputtype="button"id="add_bt"value=">"></span>
</div>
<tableclass="calendar_list"cellspacing="0">
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbodyid="date_list"></tbody>
</table>
</div>
<spanid="resetBt">回到现在日期</span>
<scripttype="text/javascript">
vardateScreen=document.getElementById('current_date');//获取显示当前年份月份的div
varreduceBt=document.getElementById('reduce_bt');//获取减少月份的按钮
varaddBt=document.getElementById('add_bt');//获取增加月份的按钮
vardateList=document.getElementById('date_list');//获取显示所有日期部分
varresetBt=document.getElementById('resetBt');//获取重设按钮
//定义好每月的日期总数总数按js获取月份数值的下标方式储存
varoverall_date=[31,28,31,30,31,30,31,31,30,31,30,31];
varadd_date=1;//定义添加日期数的初始化
//初始化日历
//获取现在的日期
varnow_date=newDate();
varnowFullYear=now_date.getFullYear();
varnowMonth=now_date.getMonth();
//执行日历输出函数
printCalendar();
//-----------------------------------
//月份减少按钮点击事件
reduceBt.onclick=function(){
nowMonth=nowMonth-1;
if(nowMonth==-1){
nowFullYear=nowFullYear-1;
nowMonth=11;
}
clearRows();
printCalendar();
}
//增加月份按钮点击事件
addBt.onclick=function(){
nowMonth+=1;
if(nowMonth==12){
nowFullYear+=1;
nowMonth=0;
}
clearRows();
printCalendar();
}
//重设按钮点击事件
resetBt.onclick=function(){
varresetDate=newDate();
nowFullYear=resetDate.getFullYear();
nowMonth=resetDate.getMonth();
clearRows();
printCalendar();
}
functionprintCalendar(){
varprintDate=newcur_date(nowFullYear,nowMonth);//实例cur_date方法
varprintFirstDay=printDate.firstDay;//获取要输出月份第一天的星期
varprintTotalDate=printDate.totalDate;//获取输出日期的总数
varprintMonth=printDate.cur_month;//获取输出的月份
(printMonth>=9)?(printMonth=(printMonth+1)):(printMonth=("0"+(printMonth+1)));
//调整月份的显示格式
varprintYear=printDate.cur_year;//获取输出的年份
vartotalRows=Math.ceil((printTotalDate+(printFirstDay-1))/7)+1;
//获取行数
//利用天数除以7天获得行数并将它向上去整但是上限是5
//而考虑到某些月会有6行所以在总行数里面加1以防万一
//开始输出
//首先显示出年和月
dateScreen.innerText=printYear+"-"+printMonth;
//开始输出日期
for(vari=0;i<totalRows;i++){
dateList.insertRow(i);
for(varj=0;j<7;j++){
//当天数总量大于额定总量时先终止内部循环
if(add_date>printTotalDate){
break;
}
dateList.rows[i].insertCell(j);
//改变周日和周六的文字颜色
if(j==0){
dateList.rows[i].cells[j].style.color="red";
dateList.rows[i].cells[j].style.fontWeight="bold";
}elseif(j==6){
dateList.rows[i].cells[j].style.color="green";
dateList.rows[i].cells[j].style.fontWeight="bold";
}
if(i==0&&j>=printFirstDay){
//当此时是第一行时而且单元格下标大于等于当前月第一天的星期就开始为单元格填入文本
dateList.rows[i].cells[j].innerText=add_date;
add_date++;
}elseif(i>0){
//第一行以后的单元格就按循环添加即可
dateList.rows[i].cells[j].innerText=add_date;
add_date++;
}
}
}
add_date=1;//输出完把日期总数重新赋值为1
}
//获取当前年、月、第一天是星期几、日期总数
functioncur_date(curYear,curMonth){
this.cur_firstDate=newDate(curYear,curMonth,1);//获取现在日期的第一天
this.cur_year=curYear;//获取当前的年
this.cur_month=curMonth;//获取当前的月
this.totalDate=is_leapYear(curYear,curMonth);//获取总天数
this.firstDay=this.cur_firstDate.getDay()//获取每个月的第一天是星期几
}
//判断今年是否为闰年
functionis_leapYear(target_year,target_month){
if((target_month==1)&&(target_year%4==0)&&((target_year%100!=0)||(target_year%400!=0))){
//当前月是2月且当前年是闰年
return29;
}else{
//其他月按正常日期总数输出
returnoverall_date[target_month];
}
}
functionclearRows(){
varrowsNum=dateList.rows.length;
while(rowsNum>0){
dateList.deleteRow(rowsNum-1);
rowsNum--;
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！