用原生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. 在CentOS 7 / Gnome 3 双屏时设置主屏

    在Windows中设置扩展显示器为主屏的方式非常清楚,但在Linux中就不是那么明显了,下面介绍如何完成这个设置 ------------------------------------------- ...

  2. codevs 3013 单词背诵 hash

    题目链接 题目描述 Description 灵梦有n个单词想要背,但她想通过一篇文章中的一段来记住这些单词. 文章由m个单词构成,她想在文章中找出连续的一段,其中包含最多的她想要背的单词(重复的只算一 ...

  3. PHP上传图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  5. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  6. GitHub Linux下使用方法

    1. 在网站注册帐号,创建工程 test 进入工程,右下角会有一个项目仓库的地址.https://github.com/braverior/test.git 2.Linux下 安装github sud ...

  7. Android Fragment 嵌套使用报错

    在新的SDK每次创建activity时,会自己主动生成  <pre name="code" class="java">public static c ...

  8. HDU1250：Hat's Fibonacci

    Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...

  9. 获取ubuntu 的root密码，告别sudo

    刚刚开始使用ubuntu的朋友可能知道一个提权命令    sudo 如果你接触过其他的Linux系统的话,你会知道  linux系统有一个最高权限   root.一般用su root,然后输入密码就可 ...

  10. Javascript对象的声明

    JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义.属性由逗号分隔: var person={firstname:" ...