纯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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python requests post多层字典的方法
2018/12/27 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
办理暂住证介绍信
2014/01/11 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
安全环保标语
2014/06/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
人生感悟经典句子
2019/08/20 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记