首页 / JAVASCRIPT / 纯js模仿windows系统日历

纯js模仿windows系统日历

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯js模仿windows系统日历，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5605字，纯文字阅读大概需要9分钟。

内容图文

在网上看了几篇关于生成日历的js 教程于是自己也整理了一个想法思路 大家有什么建议欢迎提出

首先这个项目里面本人认为的几个难点：

1、如何定义每一个月的第一天位置

每个月的第一天都不是固定的星期几，所以第一天的输出需要动动脑筋把它放到对应的星期里面

2、每个月的最后一天有时候因为行数不够输出不了怎么办？

下面会有答案 ^_^

思路：

1、定义好每一个月份的日期天数

2、获取当前的系统日期初始化数据

3、输出日历

2.1、先获取当前月的第一天是星期几（这一点与日历的排版至关重要！）
2.2、获取当前月的天数
2.3、获取当前月有多少个星期（即要输出多少行 行数这里我会预留多一行）
2.4、获取当前年份和月份 用作显示

下面便是完整的代码：

<!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('current_date');//获取显示当前年份月份的div
  var reduceBt = document.getElementById('reduce_bt');//获取减少月份的按钮
  var addBt = document.getElementById('add_bt');//获取增加月份的按钮
  var dateList = document.getElementById('date_list');//获取显示所有日期部分
  var resetBt = document.getElementById('resetBt');//获取重设按钮
  //定义好每月的日期总数 总数按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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多纯js模仿windows系统日历相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的纯js模仿windows系统日历全部内容，希望文章能够帮你解决纯js模仿windows系统日历所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/302874.html

来源：【匿名】