纯js模仿windows系统日历


Posted in Javascript onFebruary 04, 2017

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

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

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

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

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

下面会有答案 ^_^

思路:

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

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

3、输出日历

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

下面便是完整的代码:

<!DOCTYPE html>
<html lang="en">
<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 class="calendar_wrap">
 <div class="control_bar">
  <span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
  <b id="current_date">2017-02</b>
  <span class="right-bt"><input type="button" id="add_bt" value=">"></span>
 </div>
 <table class="calendar_list" 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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
canvas的神奇用法
Feb 03 #Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
js实现文本上下来回滚动
Feb 03 #Javascript
jquery代码规范让代码越来越好看
Feb 03 #Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
You might like
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
jquery easyui使用心得
2014/07/07 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python Requests 基础入门
2016/04/07 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python路径的写法及目录的获取方式
2019/12/26 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
什么是组件架构
2016/05/15 面试题
会计主管岗位职责范文
2013/11/08 职场文书
烹饪自我鉴定
2014/03/01 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
写字楼租赁意向书
2014/07/30 职场文书
身边的榜样活动方案
2014/08/20 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
体育教师个人总结
2015/02/09 职场文书
人口与计划生育责任书
2015/05/09 职场文书