纯js模仿windows系统日历

2024-10-09 02:00:27

在网上看了几篇关于生成日历的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>

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

原生JS实现日历组件的示例代码

想要实现的效果点击日期选择框出现日历有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏
js实现会跳动的日历效果(完整实例)

一.简介编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
js原生日历的实例(推荐)

突然发现日期对象可以进行加减 , 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *
原生js实现仿window10系统日历效果的实例

舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
纯js模仿windows系统日历

在网上看了几篇关于生成日历的js 教程于是自己也整理了一个想法思路大家有什么建议欢迎提出首先这个项目里面本人认为的几个难点: 1.如何定义每一个月的第一天位置每个月的第一天都不是固定的星期几,所以第一天的输出需要动动脑筋把它放到对应的星期里面 2.每个月的最后一天有时候因为行数不够输出不了怎么办? 下面会有答案 ^_^ 思路: 1.定义好每一个月份的日期天数 2.获取当前的系统日期初始化数据 3.输出日历 2.1.先获取当前月的第一天是星期几(这一点与日历的排版至关重要!)
基于JS模仿windows文件按名称排序效果

作个记录,主要是对数字的处理,如果数字的前面字符是相同的,则数字以值比较,而不是单个字符之间的比较. function SortLikeWin(v1, v2) { var a = v1.name; var b = v2.name; var reg = /[0-9]+/g; var lista = a.match(reg); var listb = b.match(reg); if (!lista || !listb) { return a.localeCompare(b); } for (var
纯JS实现简单的日历

本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(y
js模仿windows桌面图标排列算法具体实现(附图)

注:需要引入Jquery 如果需要全部功能,请引入jquery-ui和jquery-ui.css 截图: js代码: 复制代码代码如下: $(function() { //菜单列表 var menu_list=$(".menu-list"); //工作区 var working=$(".working"); working.click(function() { menu_list.hide(); $(".content-menu").hide
windows系统下node.js环境配置与安装教程图文详解(详细版)

国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件下载地址:官网https://nodejs.org/en/download/ 这里用的是第二步:安装nodejs 下载完成之后,双击 node-v6.9.1-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面第三步:安装相关环境打开C:\Program Files\
Windows系统下安装Node.js的步骤图文详解

前言随着近日Paypal和Netflix宣告迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP, Ruby on Rails和更多技术领域的程序员, 所有游走于服务器端的编码者都会聚集到这个平台上. 作为像 Yahoo, Walmart, 和 Oracle 这样的大玩家入局,, Node 正在甩掉其一直就存在的不成熟和不稳定的坏名声. 在这篇文章
Windows系统下Node.js安装以及环境配置的完美教程

目录一.安装环境二.安装Node.js步骤三.前期准备 1.Node.js简介 2.下载Node.js 四.开始安装五.环境配置六.测试本人安装路径实况总结一.安装环境 1.本机系统:Windows 10 Pro(64位) (楼主win7,完美通过) 2.Node.js:v6.9.2LTS(64位) (楼主版本2018-11-01下载的最新版本) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2
Windows系统下Node.js的简单入门教程

随着近日Paypal和Netflix宣告迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP, Ruby on Rails和更多技术领域的程序员, 所有游走于服务器端的编码者都会聚集到这个平台上. 作为像 Yahoo, Walmart, 和 Oracle 这样的大玩家入局,, Node 正在甩掉其一直就存在的不成熟和不稳定的坏名声. 在这篇文章中,我
使用 node.js 模仿 Apache 小部分功能

首先,这个例子用到了服务端渲染的技术.服务端渲染,说白了就是在服务端使用模板引擎,这里我先简单的介绍一下服务端渲染与客户端渲染之间的区别. 服务端渲染与客户端渲染之间的区别: 客户端渲染不利于搜索引擎优化服务端渲染可以被爬虫抓取到,而客户端异步渲染很难被爬虫抓取到(例如:AJAX) 大部分的网站既不是纯异步(客户端),也不是纯服务端渲染出来的,而是两者结合的例如:京东的商品列表采用的就是服务端渲染,目的是为了SEO搜索引擎优化,说白了就是为了能够被搜索到,且能被爬虫抓取(搜索引擎本身也是一种

纯js模仿windows系统日历

相关推荐

随机推荐