search

Home >Web Front-end >JS Tutorial >Pure js imitates windows system calendar

Pure js imitates windows system calendar

高洛峰
高洛峰Original
2017-02-06 10:52:181188browse

I read a few js tutorials about generating calendars on the Internet, so I also sorted out an idea. If you have any suggestions, please feel free to give them.

First of all, there are several difficulties that I think in this project:

1. How to define the position of the first day of each month

The first day of each month is not a fixed day of the week, so the output of the first day needs to use your brain to place it Go to the corresponding week

2. What should I do if the last day of each month sometimes cannot be output because there are not enough rows?

There will be answers below^_^

Ideas:

1. Define the number of days in each month

2. Get the current system date Initializing data

3. Output calendar

2.1. First get the day of the week that the first day of the current month is (this is crucial to the layout of the calendar!)
2.2. Get the current day Number of days in the month
2.3. Get how many weeks there are in the current month (that is, how many rows to output, I will reserve one more row here)
2.4. Get the current year and month for display

The following is the complete code: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>js 日历</title>
 <style type="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: 0 auto;
  padding: 0;
  border: 1px solid #000;
  }
  .calendar_list{
  width: 100%;
  margin-top: 10px;
  }
  .calendar_list tr{
  width: 100%;
  }
  .calendar_list tr td{
  text-align: center;
  height: 45px;
  }
  .control_bar{
  word-spacing: -6px;
  }
  .control_bar span,.control_bar b{
  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: 0 auto;
  }
  #date_list tr td:hover{
  background-color: #ccc;
  cursor: default;
  }
 </style>
</head>
<body>
 <div>
 <div>
  <span><input type="button" id="reduce_bt" value="<"></span>
  <b id="current_date">2017-02</b>
  <span><input type="button" id="add_bt" value=">"></span>
 </div>
 <table cellspacing="0">
  <thead>
   <tr>
   <td>日</td>
   <td>一</td>
   <td>二</td>
   <td>三</td>
   <td>四</td>
   <td>五</td>
   <td>六</td>
   </tr> 
  </thead>
  <tbody id="date_list"></tbody> 
 </table>
 </div>
 <span id="resetBt">回到现在日期</span>
 <script type="text/javascript">
  var dateScreen = document.getElementById(&#39;current_date&#39;);//获取显示当前年份月份的div
  var reduceBt = document.getElementById(&#39;reduce_bt&#39;);//获取减少月份的按钮
  var addBt = document.getElementById(&#39;add_bt&#39;);//获取增加月份的按钮
  var dateList = document.getElementById(&#39;date_list&#39;);//获取显示所有日期部分
  var resetBt = document.getElementById(&#39;resetBt&#39;);//获取重设按钮
  //定义好每月的日期总数 总数按js 获取月份数值的下标方式储存
  var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
  var add_date = 1;//定义添加日期数的初始化
  //初始化日历
  //获取现在的日期
  var now_date = new Date();
  var nowFullYear = now_date.getFullYear();
  var nowMonth = 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(){
  var resetDate = new Date();
  nowFullYear = resetDate.getFullYear();
  nowMonth = resetDate.getMonth();
  clearRows();
  printCalendar();
  }
  function printCalendar(){
  var printDate = new cur_date(nowFullYear,nowMonth);//实例cur_date方法
  var printFirstDay = printDate.firstDay;//获取要输出月份第一天的星期
  var printTotalDate = printDate.totalDate;//获取输出日期的总数
  var printMonth = printDate.cur_month;//获取输出的月份
  (printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
  //调整月份的显示格式
  var printYear = printDate.cur_year;//获取输出的年份
  var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;
  //获取行数
  //利用天数除以7天获得行数并将它向上去整 但是上限是5
  //而考虑到某些月会有6行所以在总行数里面加1 以防万一
  //开始输出
  //首先显示出年和月
  dateScreen.innerText = printYear + "-" + printMonth;
   //开始输出日期
   for (var i = 0; i < totalRows; i++) {
   dateList.insertRow(i);
   for (var j = 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";
   }else if(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++;
   }else if(i > 0){
   //第一行以后的单元格就按循环添加即可
   dateList.rows[i].cells[j].innerText = add_date;
   add_date++;
   }
   }
   }
  add_date = 1;//输出完把日期总数重新赋值为1
  }
  //获取当前年、月、第一天是星期几、日期总数
  function cur_date(curYear,curMonth){
  this.cur_firstDate = new Date(curYear,curMonth,1);//获取现在日期的第一天
  this.cur_year = curYear;//获取当前的年
  this.cur_month = curMonth;//获取当前的月
  this.totalDate = is_leapYear(curYear,curMonth);//获取总天数
  this.firstDay = this.cur_firstDate.getDay()//获取每个月的第一天是星期几
  }
  //判断今年是否为闰年
  function is_leapYear(target_year,target_month){
  if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
     //当前月是2月且当前年是闰年
     return 29;
  }else{
  //其他月按正常日期总数输出
  return overall_date[target_month];
  }
  }
  function clearRows(){
  var rowsNum = dateList.rows.length;
  while(rowsNum > 0){
   dateList.deleteRow(rowsNum - 1);
   rowsNum--;
  }
  }
 </script>
</body>
</html>

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more articles related to pure js imitating the windows system calendar, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Very useful js calendar algorithm detailed codeNext article：Very useful js calendar algorithm detailed code

Related articles

See more