js超简单日历

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

思路：

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

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;

 }

 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超简单日历的更多相关文章

ECharts.js 超简单入门（本质canvas）
ECharts.js 超简单入门(本质canvas) 一.总结一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
js超简单冒泡算法
点击按钮--从大到小排序,可以通过代码中大于号小于号的选择来判定从小到大或者从大到小. <!DOCTYPE html> <html> <head> <titl ...
js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
超简单的OpenGL & WebGL & Three.js介绍_1
专业解释什么是OpenGL OpenGL(Open Graphics Library即开放图形库或者“开放式图形库”)是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API). 这个 ...
ASP.NET中一种超简单的Ajax解决方案
为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...
打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）具体解释
为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...
超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...

随机推荐

[转] jQuery 操作 JSON 数据
jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...
一周学会Mootools 1.4中文教程:(7)汇总收尾
转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱 ...
spring util命名空间
在spring的配置文件中util命名空间类似于java.util包类对应,util命名空间提供了集合相关的配置,在使用命名空间前要导入util命名空间,如下: util命名空间引入 <bean ...
C# 基础中有关术语理解
一.栈vs堆深入理解堆栈.堆在内存中的实现二.Socket 深入探析c# Socket 三.多线程 c# 多线程 --Mutex(互斥锁)
再探Delphi2010 Class的构造和析构顺序
发了上一篇博客.盒子上有朋友认为Class的构造和析构延迟加载.是在Unit的初始化后调用的Class的构造.在Unit的反初始化前调用的Class的析构函数. 为了证明一下我又做了个试验 unit ...
Noip2013调试技巧
关于调试技巧,个人觉得还是很重要的,于是把自己之前写过的总结拿出来,修修补补再复习一下. F7 单步跟踪法这是大家都最常用的调试方法,可以一步一步去跟踪程序的运行方向,以及各种变量的变化情况,当发现 ...
Uber司机手机终端问答篇
手机客户端 Q:自带安卓手机可以使用吗? A:安卓终端已经推出,请在微信页面点左下菜单选取“下载司机端APP”查看! Q:对自带苹果手机的要求? A:4S型号及以上且未越狱:使用3G或4G网络 Q:客 ...
PHP中的一个很好用的文件上传类
<?php class FileUpload{ private $filepath; //设置上传文件的路径 private $allowtype=array('jpg',' ...
swift学习第五章-字典的使用
//以下是关于字典的 //字典的格式[key:value] //字典能够存放基本类型和对象类型的 //声明一个字典 var dictionary1=["key1":"鸭鸭 ...
#ifdef _cplusplus
时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus extern "C" { #endif //一段代码 #ifdef __cplusplus } #en ...

js超简单日历

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

随机推荐

热门专题