<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <h3><span id="last" style="cursor:pointer;"><</span><span id="year"></span>年<span id="month"></span>月<span id="day"></span>日<span id="next" style="cursor:pointer;">></span></h3> </div> <script> var times = function(months,years){ var box = document.getElementById("box"), //创建表格容器，星期列表和日期列表 tableid = document.getElementById("table"); if(tableid){ tableid.parentNode.removeChild(tableid); } var weektr = document.createElement("tr"), weektrtd = '', table = document.createElement("table"), tbody = document.createElement("tbody"), week = ['一','二','三','四','五','六','日']; for(var weeknum = 0;weeknum<7;weeknum++){ var weekday= week[weeknum]; weektrtd +="<td>"+weekday+"</td>"; } weektr.innerHTML = weektrtd; table.setAttribute('id','table'); tbody.setAttribute('id','tbody'); table.appendChild(weektr); table.appendChild(tbody);//创建完成 //开始日期的实现 var time = new Date(); var year =years?years:time.getFullYear(),//判断是否有点击事情及是否上下年份切换; day = time.getDate(), indexoftable = 0, tables="", rows="", thismonth = time.getMonth(),//当月，用来标记当天高亮； x = year%4== 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0,//闰月判断 montharray = [31,28+x,31,30,31,30,31,31,30,31,30,31],//月份创建 yearid = document.getElementById("year"), monthid = document.getElementById("month"), dayid = document.getElementById("day"); if(typeof months=="undefined"){//判断是否有点击事情及是否上下月份切换; var month = time.getMonth(); }else{ var month = months; } var firstday = new Date(year,month,1),//获取当月的第一天 firstdayandweek = firstday.getDay();//获取当月第一天对应的星期 if(firstdayandweek==0){ firstdayandweek=7;//星期天时(为0)重新赋值为7； } //循环遍历出日期 for(var line = 0;line<6;line++){ rows=""; for(var list = 0;list<7;list++){ var lastandnext = 0; var linestart = "<tr>"; indexoftable = 7*line+list; showtimenumbar =indexoftable-firstdayandweek+2;//月份中日期对应的星期，整个函数的核心 if(showtimenumbar<=0){ var lastandnext = 1; if(month==0){ showtimenumbar = montharray[11]+showtimenumbar; }else{ showtimenumbar = montharray[month-1]+showtimenumbar; } }else if(showtimenumbar>montharray[month]){ var lastandnext = 1; if(month==11){ showtimenumbar = showtimenumbar-montharray[0]; }else{ showtimenumbar = showtimenumbar-montharray[month]; } } ((showtimenumbar == day)&&(month == thismonth))? tdlist = "<td style='color:#fff;background-color:#3366FF;border:1px solid #fff;cursor:pointer;'>"+showtimenumbar+"</td>":(lastandnext==1?tdlist = "<td style='color:#ccc;cursor:not-allowed;'>"+showtimenumbar+"</td>":tdlist = "<td style='cursor:pointer;'>"+showtimenumbar+"</td>") rows +=tdlist; var lineend = "</tr>"; } tables += linestart +rows+lineend; } tbody.innerHTML = tables; yearid.innerHTML = year monthid.innerHTML = (month +1)>10?(month+1):'0'+(month+1); dayid.innerHTML = day>10?day:'0'+day; box.appendChild(table); } function nextandlast(){ var lastid = document.getElementById("last"), time = new Date(), monthid = document.getElementById("month"), nextid = document.getElementById("next"); yearid = document.getElementById("year"); lastid.onclick = function(){ var months = parseInt(monthid.innerHTML)-2, years = parseInt(yearid.innerHTML); if(months<0){ months = 11; years = parseInt(yearid.innerHTML)-1 } return times(months,years); } nextid.onclick =function(){ var months = parseInt(monthid.innerHTML), years = parseInt(yearid.innerHTML) if(months>11){ months = 0; years = parseInt(yearid.innerHTML)+1 } return times(months,years); } } window.onload = function loads(){ times(); nextandlast(); } </script> </body> </html>