用原生js写了一个超级简单的日历。当做是练习js中的Date类型。

思路：

  1. 获取某个日期，根据年份计算出每个月的天数。
  2. 利用Date中的getDay()知道该月份的第一天为星期几。
  3. 循环创建表格，显示日历。

html

 <!DOCTYPE html>

 <html>

 <head>

     <title>JS简单日历</title>

     <meta http-equiv="Content-type" content="text/html" charset="utf-8">

     <link rel="stylesheet" type="text/css" href="Date.css">

 </head>

 <body>

     <div id="content">

         <div id="dateInput">

             <label>日期：(格式：yyyy-mm-dd)</label>

             <input type="text" id="check">

             <input type="button" id="changeDate" value="查询">

         </div>

         <div id="calendar">

             <div id="calendarHeader">

                 <div>

                     <img id="back" src="back.png">

                     <span id="cur"></span>

                     <img id="forward" src="forward.png">

                 </div>

             </div>

             <div id="calendarTable">

                 <table>

                     <tbody>

                         <tr>

                             <th>一</th>

                             <th>二</th>

                             <th>三</th>

                             <th>四</th>

                             <th>五</th>

                             <th>六</th>

                             <th>日</th>

                         </tr>

                     </tbody>

                 </table>

             </div>

         </div>

     </div>

     <script type="text/javascript" src="Date.js"></script>

 </body>

 </html>

css

 #dateInput {

     background: #33CCCC;

     color: white;

     font-weight: bold;

     max-width: 450px;

     margin: 0 auto;

     padding: 1em;

 }

 #calendar {

     max-width: 450px;

     margin: 0 auto;

     background: #5CCCCC;

     padding: 1em;

 }

 #back {

     float: left;

 }

 #forward {

     float: right;

 }

 #cur {

     color: white;

     font-size: 120%;

     position: relative;

     left: 30%;

 }

 table {

     max-width: 450px;

     margin: 0 auto;

     color: white;

     padding: 1em;

 }

 th,td {

     width: 50px;

     padding: 10px;

     text-align: center;

 }

 td {

     border:1px solid white;

 }

 th {

     background-color: #009999;

 }

 .now {

     background-color: #006363;

 }

js

 var y, m;

 function addEvent(func) {

     var old = window.onload;

     if (typeof old === "function") {

         old();

         func();

     } else {

         window.onload = func;

     }

 }

 //设置日历的标题

 function setCalendarTitle(obj) {

     var year = obj.getFullYear();

     var month = obj.getMonth() + 1;

     var title = ""+year+"年"+month+"月";

     y = year;

     m = month;

     var set = document.getElementById('cur');

     if (set.childNodes.length > 0)

         set.removeChild(set.childNodes[0]);

     var txt = document.createTextNode(title);

     set.appendChild(txt);

     var now = new Date(year, month-1, 1);

     calculateDay(now);

 }

 //计算当前月份有几天，第一天是星期几

 function is_leap(year) {

    return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));

 }

 function day(year) {

     mDays = new Array(31,28+is_leap(year),31,30,31,31,30,31,30,31,30,31);

     return mDays;

 }

 function calculateDay(obj) {

     var dayArr = day(obj.getFullYear());

     var dayNum = dayArr[obj.getMonth()];

     var dayFirst = obj.getDay(); //0是星期天， 6是星期六

     var firstRow;

     if (dayFirst != 0) {

         firstRow = 8 - dayFirst;//第一行有日期的单元格个数,从右边数

     } else {

         firstRow = 1;

     }

     var firstRowBlank = 7 - firstRow; //第一行空的个数

     var lastRow = (dayNum - firstRow) % 7; //最后一个有日期的单元格个数

     var lastRowBlank = 7 - lastRow;

     var RowNum = (dayNum - firstRow - lastRow) / 7 + 2;

     renderCalendar(RowNum, firstRow, firstRowBlank, lastRow, lastRowBlank);

 }

 function renderCalendar(RowNum, firstRow, firstRowBlank, lastRow, lastRowBlank) {

    var tbody = document.getElementsByTagName('tbody')[0];

    var tr = tbody.getElementsByTagName("tr");

    var len = tr.length;

    if (len > 1) {

            for (var index = 1; index < len; index++) {

                 tbody.removeChild(tr[1]);

            }

    }

    var i = 1;

    var j = 1;

    for (; i <= RowNum; i++) {

            if (i == 1) {

                var row = document.createElement("tr");

                while(firstRowBlank > 0) {

                    var blank = document.createElement("td");

                    row.appendChild(blank);

                    firstRowBlank--;

                }

                while(firstRow > 0) {

                    var date = document.createElement("td");

                    var txt = document.createTextNode(j);

                    date.appendChild(txt);

                    row.appendChild(date);

                    j++;

                    firstRow--;

                }

                tbody.appendChild(row);

            } else if (i == RowNum && lastRow > 0) {

                var row = document.createElement("tr");

                while(lastRow > 0) {

                    var txt = document.createTextNode(j);

                    var date = document.createElement("td");

                    date.appendChild(txt);

                    row.appendChild(date);

                    j++;

                    lastRow--;

                }

                while(lastRowBlank > 0) {

                    var blank = document.createElement("td");

                    row.appendChild(blank);

                    lastRowBlank--;

                }

                tbody.appendChild(row);

            } else {

                var day = 7;

                var row = document.createElement("tr");

                while(day > 0) {

                    var date = document.createElement("td");

                    var txt = document.createTextNode(j);

                    date.appendChild(txt);

                    row.appendChild(date);

                    j++;

                    day--;

                }

                tbody.appendChild(row);

            }

    }

 }

 //读取系统当前时间，设置

 function initiate() {

     var now = new Date();

     setCalendarTitle(now);

 }

 function checkCalendar() {

     var button = document.getElementById('changeDate');

     button.onclick = function() {

         var date = document.getElementById("check").value;

         var newDate = new Date(Date.parse(date));

         setCalendarTitle(newDate);

     }

 }

 function forwardMoth() {

     var forward =  document.getElementById("forward");

     forward.onclick = function() {

         var year = y;

         var month = m;

         if ((month+1) <= 12) {

             var newDate = new Date(year, month, 1);

             setCalendarTitle(newDate);

         } else {

             var newDate = new Date(year+1, 0, 1);

             setCalendarTitle(newDate);

         }

     }

 }

 function backMonth() {

     var back =  document.getElementById("back");

     back.onclick = function() {

         var year = y;

         var month = m;

         if ((month-1) >= 1) {

             var newDate = new Date(year, month-2, 1);

             setCalendarTitle(newDate);

             m = month - 1;

         } else {

             var newDate = new Date(year-1, 11, 1);

             setCalendarTitle(newDate);

             m = 12;

         }

     }

 }

 addEvent(initiate());

 addEvent(checkCalendar());

 addEvent(forwardMoth());

 addEvent(backMonth());

效果图：

js超简单日历的更多相关文章

  1. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  2. js超简单冒泡算法

    点击按钮--从大到小排序,可以通过代码中大于号小于号的选择来判定从小到大或者从大到小. <!DOCTYPE html> <html> <head> <titl ...

  3. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 超简单的OpenGL & WebGL & Three.js介绍_1

    专业解释 什么是OpenGL OpenGL(Open Graphics Library即开放图形库或者“开放式图形库”)是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API). 这个 ...

  6. ASP.NET中一种超简单的Ajax解决方案

    为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...

  7. 打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）具体解释

    为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...

  8. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  9. 超简单工具puer——“低碳”的前后端分离开发

    本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...

随机推荐

  1. Let's Format Css Documents

    每次想参考一些好看网站的时候,打开css文档都是一行的,琢磨了下就自己写了块短短的代码,各路Java大神别笑我呀.^_^ 复制粘贴控制台的输出就好了.(瞬间觉得跟上大神的脚步了←_←) package ...

  2. hdu 4628 Pieces 状压dp

    题目链接 枚举所有状态, 1表示这个字符还在原来的串中, 0表示已经取出来了. 代码中j = (j+1)|i的用处是枚举所有包含i状态的状态. #include <iostream> #i ...

  3. IC封装

    1.QFN •QFN—Quad Flat No-lead Package 四方无引脚扁平封装 2.SOIC •SOIC—Small Outline IC 小外形IC封装 3.TSSOP •TSSOP— ...

  4. UVA - 297Quadtrees（四分图）

    Quadtrees Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu Submit Statu ...

  5. SQL Server数据转换【包括Geometry类型】的技巧总结

    1. 字段的组合: update new_master_location set tmp_street_unique=street+'_'+city+'_'+state+'_'+zip+'_'+con ...

  6. poj2356 Find a multiple(抽屉原理|鸽巢原理)

    /* 引用过来的 题意: 给出N个数,问其中是否存在M个数使其满足M个数的和是N的倍数,如果有多组解, 随意输出一组即可.若不存在,输出 0. 题解: 首先必须声明的一点是本题是一定是有解的.原理根据 ...

  7. OpenCV 开发环境环境搭建（win10+vs2015+opencv 3.0）

    OpenCV 3.0 for windows(下载地址:http://opencv.org/): 本测试中,OpenCV安装目录:D:\Program Files\opencv,笔者操作系统为64位. ...

  8. java读取配置文件的几种方法

    java读取配置文件的几种方法 原文地址:http://hbcui1984.iteye.com/blog/56496         在现实工作中,我们常常需要保存一些系统配置信息,大家一般都会选择配 ...

  9. python re(正则模块)

    参考文档:http://blog.csdn.net/wusuopubupt/article/details/29379367 ipython环境中,输入"?re",官方解释如下: ...

  10. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...