关于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="&nbsp;":dateStr)
calderStr+=`<td>${dateStr}</td>`;
}

以上就是日历的全部了。

   

 

posted @ 2017-04-23 19:33  宇临天下  阅读(384)  评论(0)    收藏  举报