js 日历

前几天工作的时候，困于js 内置对象Date()的使用，所以想写一个日历的插件，之前有看过一个视频，视频的老师说，不要说你不会，先做你会的，慢慢想就出来了。我就这样单枪匹马的上了，思路大概是这样的，第一行显示当天的日期，第二行显示星期，后面显示天数；思路比较古板，刚刚是准备用p标签里面嵌入span标签，在实施的过程中遇见两个问题，首先span标签不能直接的定义宽度、长度，其次span换行不方便，失败几次以后果断换成了td ，下面把我的想法和算法做一个比较:

两种方法的大致思路：

1.取得月的总天数

2.当月一号星期几

3.打印

 

1.取得月的总天数

算法中获取月总天数的方法：

function is_leap(year) {
    return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
} //是否为闰年

var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数

我的获取月总天数的方法：
//获取当月最后一天，用数组将天数存储起来

var date1  = new Date(year,month,0);
var   lastDay= date1.getDate();
var dayList = new Array();
for(var i =1;i<=lastDay;i++){
    dayList[i-1] = i;
}

2.当月一号星期几  ，这个就比较通用，都是getDay()

　　算法：

var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯
var firstday=n1str.getDay(); //当月第一天星期几

　　我的：

var date2 = new Date(year,month-1,1);
weekOfDay = date2.getDay();

3.打印

var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数

//打印表格第一行（有星期标志）
document.write ("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

for(i=0;i<tr_str;i++) { //表格的行
    document.write("<tr>");
    for(k=0;k<7;k++) { //表格每行的单元格
        idx=i*7+k; //单元格自然序列号
        date_str=idx-firstday+1; //计算日期
        (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）
        //打印日期：今天底色为红
        date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>");
    }
    document.write("</tr>"); //表格的行结束
}

document.write("</table>"); //表格结束

不得不说算法的语音很精炼，条件运算符用的很溜

var id = document.getElementById(id);
var node4 = document.createElement("tr");
var date2 = new Date(year,month-1,1);
weekOfDay = date2.getDay();
for(var m = 0;m<weekOfDay;m++){
    var node3Td  = document.createElement("td");
    node4.appendChild(node3Td);
}
var dayList = new Array();
dayList = monthDays(year,month).dayList;
for(var i =0;i<dayList.length;i++){
    var node4Td  = document.createElement("td");
    node4Td.innerHTML = dayList[i];
    if(dayList[i]==day){//当天样式
        //  node4Td.setAttribute("class", "now");
        node4Td.className="now";
    }
    node4.appendChild(node4Td);
    id.appendChild(node4);

    var td = node4.childNodes;//判断td的数目
    if(td.length>6){//超过则换行
        node4 = document.createElement("tr");
        console.log(td)
    }

}

我的语言没有算法那么凝练，但我觉得思路是不寻常的，就想着记录下来

但是有一个考虑，算法的样式写的内联样式，在一定程度上会造成不便，或许可以用我这种动态创建DOM元素的方法，这样就可以在css文件中直接写样式，但是值得注意的是得在元素存在页面上的时候才能对其进行操作

上一个月、下一个月的按钮
添加这两个按钮时记得清除之前的内容，否则按钮不起作用

function preMonth() {
    console.log(mnow);
    if(mnow<=0){
        mnow = 11;
        ynow = ynow-1;
    }else {
        mnow--;
    }
    calendar(nstr,ynow,mnow,dnow);
    monDetail(ynow,mnow)
}


function nextMonth() {
    console.log(mnow);
    if(mnow>=11){
        mnow = 0;
        ynow = ynow+1;
    }else {
        mnow--;
    }
    calendar(nstr,ynow,mnow,dnow);
    monDetail(ynow,mnow)
}}