纯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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
Paypal支付不完全指北
Jun 04 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
简单的js表格操作
2016/09/24 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
js module大战
2019/04/19 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python getpass实现密文实例详解
2019/09/24 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
揠苗助长教学反思
2014/02/04 职场文书
学生安全责任书模板
2014/07/25 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
干部年终考核评语
2015/01/04 职场文书
体育活动总结
2015/02/04 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
php实例化对象的实例方法
2021/11/17 PHP