用原生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. java附件上传下载大字段版

    public int up2(Map map) { StringBuffer insertSQL = new StringBuffer(); insertSQL.append("insert ...

  2. Address already in use: JVM_Bind错误的解决

    1,独立运行的Tomcat没有关闭. 自安装的tomcat程序设置开机自动运行,或者在之前运行过,先关闭ecplipse或jbuilder,在任务管理器中找到Tomcat的进程,将其 kill掉,即可 ...

  3. Codeforces 703D Mishka and Interesting sum（树状数组+扫描线）

    [题目链接] http://codeforces.com/contest/703/problem/D [题目大意] 给出一个数列以及m个询问,每个询问要求求出[L,R]区间内出现次数为偶数的数的异或和 ...

  4. hdu 2563 统计问题

    统计问题 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  5. CH Round #57 - Story of the OI Class 凯撒密码

    很有意思的一道题目 考场上想的是HASH成一个整数,把末位asicc码值*1,依次乘*10,得到一个整数,然后利用等差性.唯一性快排Nlogn乱搞的 证明如下: 对于明文abcde 密文 bcdef ...

  6. 使用java API查询java类

    一.java API的下载地址 前面列举了常用的java类,但只是介绍了功能,具体详细的用法(比如要知道该类的属性和方法)要需要调用java的API(Application Program Inter ...

  7. 【c语言】推断一个数是不是2的n次方

    // 推断一个数是不是2的n次方 #include <stdio.h> void judge_n(int a) { int b = a - 1; if ((a & b) == 0) ...

  8. Apache OFbiz entity engine源代码解读

    简单介绍 近期一直在看Apache OFbiz entity engine的源代码.为了能够更透彻得理解,也由于之前没有看人别人写过分析它的文章,所以决定自己来写一篇. 首先,我提出一个问题,假设你有 ...

  9. ANDROID对文件的操作

    import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.Inp ...

  10. 七日筑基——C#第二天

    上一次讲到了变量,变量这个东西可以说是编程的基础,主要的作用就是用来存放数据,就跟做菜一样的,不同的菜要放在不同类型的容器中,那么不同的数据也需要存放在不同类型的变量里.先放张饭菜的图给大家看看,增加 ...