简易年历

简易日历

清明放假，闲着无事，就想着写写代码，所以写了小东西，希望需要的朋友喜欢。

?

?日历代码：

?

/** * 日志插件; */var d_year=date('Y');//全局年var d_month=date('m');//全局月var d_day=date('d');//全局日var is_old=null;//更换时，新的日期;/** * 初始化日历，并输出; */function init() {var str = "<table id='calendar' cellspacing='0'>";str += header();//头部输出;str += tops();//顶部星期输出;;var ls=list(d_year,d_month,1);str+="<tbody id='calendar_tbody'>"+ls['str']+"</tbody>";str += "</table>";document.write(str);}function ani(){var arr=['猴','鸡','狗','猪','鼠','牛','虎','兔','龙','蛇','马','羊'];var yyyy=date('Y');return /^\d{4}$/.test(yyyy)?arr[yyyy%12]:null;}/** * 输出星期; * @returns {String} */function tops() {var str = "<tr class='week'>";var arr = [ '日', '一', '二', '三', '四', '五', '六' ];for ( var i in arr) {str += "<td>" + arr[i] + "</td>";}str += "</tr></thead>";return str;}/** * 更换年月时，刷新数据； * @param ms数据; * @param t标量  y:d_year  m:d_month   d:d_day */function change_(ms,t){if(t=='y'){d_year=ms;}else if(t=='m'){d_month=ms;}else{d_day=ms;}var cal=document.getElementById('calendar');var node=cal.getElementsByTagName("tbody")[0];cal.removeChild(node);//清除tbody中的数据;var str=list(d_year,d_month,1);//更换的日期;var node=document.createElement("tbody");try{node.setAttribute("id", "calendar_tbody");cal.appendChild(node);var tbody=document.getElementById('calendar_tbody');tbody.innerHTML=str['str'];//赋值;}catch(e){//兼容IE，Opera  不支持table中不支持innerHTML; var arr=str['rows']; for(var i in arr){ var tr=document.createElement("tr"); for(var x in arr[i]){ var td =document.createElement("td"); var txt=document.createTextNode(arr[i][x]); td.appendChild(txt); if(d_day==arr[i][x]){td.setAttribute("class", "current"); } tr.appendChild(td); } node.appendChild(tr); } node.setAttribute("id", "calendar_tbody"); cal.appendChild(node);}//改变生肖;var y=document.getElementById('ani');y.innerHTML=ani();}/** * 顶部，输出;   年 月的刷选; * @returns {String} */function header(){var str = "<thead><tr><td colspan=7 style='text-align:center' class='top'>";str+='<select onchange="change_(this.value,\'y\')">';for(var i=2100;i>=1970;i--){if(i==d_year){str+="<option value='"+i+"' selected>"+i+"</option>";}else{str+="<option value='"+i+"'>"+i+"</option>";}}str+="</select>&nbsp;&nbsp;<span id='ani'>"+ani()+"</span>年";str+='&nbsp;&nbsp;<select onchange="change_(this.value,\'m\')">';for(var i=1;i<=12;i++){if(i==d_month){str+="<option value='"+i+"' selected>"+i+"</option>";}else{str+="<option value='"+i+"'>"+i+"</option>";}}str+="</select>&nbsp;月";str += "</td></tr>";return str;}/** * 输出日期的具体排布; * @param year * @param mon * @param day * @returns {String} */function list(year,mon,day) {var rows=[];var str = "<tr>";is_old=new Date(year,mon-1,day);var d=is_old.getDay();//有更换则是var line=1;//计算行数;if(d==0){line=0;//如果开始是星期天，那么就是第0行;}for(i=1;i<=7;i++)       {   rows[i]=new Array(); //将每一个子元素又定义为数组       }  for(var y=1;y<=d;y++){//开始的空格;str+="<td>&nbsp;</td>";rows[line][y]=" ";}var last=0;for ( var i=1;i<=date('c');i++) {//每月的 日数输出;var s="";if(i==d_day){s="<td class='current'>"+i+"</td>";}else{s="<td>"+i+"</td>"; }if((i+d-1)%7==0){line++;//获取输出了多少行，计算最后的空格数;str += "</tr><tr>"+s;rows[line][i]=i;}else{str += s;rows[line][d+i]=i;}last=d+i;}for(var i=1;i<=(line*7-date('c')-d);i++){str+="<td>&nbsp;</td>";rows[line][last+i]=" ";}str += "</tr>";var ls=[];ls['str']=str;ls['rows']=rows;return ls;}/** * 获取年，月  对应的天数; * @param Year * @param Mon * @returns {Number} */function Day(Year, Mon) {var start = new Date(Year, Mon - 1, 1);var end = new Date(Year, Mon, 1);var r = (end - start) / (1000 * 60 * 60 * 24);return r;}/** * 时间访问函数,思路来源与php的date函数的用法; * @param str * @returns {String} */function date(str) {var arr = str.split('');if(is_old==""){//日期的判断;var date = getCalendar('');}else{var date = getCalendar(is_old);}var str = "";for ( var i in arr) {//遍历返回值;if (date[arr[i]]) {if ((date[arr[i]] + "").length == 1) {str += "0" + date[arr[i]];} else {str += date[arr[i]];}} else {str += arr[i];}}return str;}/** * 获取日历的日期; 存入数组，便于访问; * @param todate * @returns {Array} */function getCalendar(todate) {var arr = [];var date =new Date();if(todate){arr['d'] = todate.getDate();}else{arr['d'] = date.getDate();}if(todate){arr['Y'] = todate.getFullYear();}else{arr['Y'] = date.getFullYear();}if(todate){arr['m'] = todate.getMonth() + 1;}else{arr['m'] = date.getMonth() + 1;}if(todate){arr['z'] = todate.getYear();}else{arr['z'] = date.getYear() ;}arr['H'] = date.getHours();arr['i'] = date.getMinutes();arr['s'] = date.getSeconds();arr['c'] = Day(arr['Y'],arr['m']);//每月天数;arr['x'] = date.getDay();//星期几;return arr;}

?

?HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>日历</title><script type="text/javascript" src="calendar.js"></script><style type="text/css">#calendar{width:300px;border:none;border: 1px solid #C3D9FF;font: '楷体', '仿宋', '微软雅黑';}#calendar .current{color:red;}#calendar td{text-align:center;padding:4px 2px;}#calendar .top{background: #E7EEF8;color: #003784;height:28px;}#calendar .week td{border-bottom:1px solid #DDDDDD}#calendar tbody td{font-weight: bold;color:#444;}#ani{color:red;}</style></head><body><script type="text/javascript">init();</script></body></html>

?

?如果是简单显示日历功能的，是没问题。