js生成日历
来源：互联网 发布：自然哲理 知乎 编辑：程序博客网 时间：2024/06/05 00:33
算法：
1. 根据指定年份和月份，计算该月第一天的起始位置和最后一天的结束位置
2.第一个单元格到起始位置，填充上个月日期或空白
3.起始位置和结束位置填充该月日期
4.结束位置之后填充下个月日期或空白
效果图：
JS代码：
var showIds=[];var selectedId =null;var selectedMonth = null;var selectedYear = null;/**日历初始化，默认当前月份日历*/function initCalendar(calendarId){ var date_now = new Date(); initCalendarNew(calendarId, date_now.getFullYear(),date_now.getMonth());}/*** calendarId: 日历容器id* year：4位年* month: 0~11*/function initCalendarNew(calendarId,year,month){ selectedMonth=month; selectedYear=year; var cDate = new Date(Date.parse(year+"/"+(month+1)+"/1")); var calendar = document.getElementById('calendarId'); if(calendarId){ calendar = document.getElementById(calendarId); } if(calendar!=null){ calendar.innerHTML=""; var cTable = document.createElement("table"); calendar.appendChild(cTable); initCalendarHead(cTable); //计算month的总天数 var monthDays = getMonthDays(month+1); //计算月份开始位置 var monthBegin = calcStart(cDate); //计算月份结束位置 var monthEnd = monthDays+monthBegin; //最后一行最后一个单元格位置 var end = monthEnd%7==0?monthEnd:monthEnd+(7-monthEnd%7) var tr = null; var td = null; var week = -1; for(var i=0;i<end;i++){ if(i%7==0){ tr = cTable.insertRow(-1); tr.style.height=38; } td= tr.insertCell(-1); week = (i+1)%7; //创建单元格 initCell(td,i-monthBegin,i,i-monthEnd,i>=monthEnd,month,week); } }}/*** date 单元格位置与该月份第一天单元格位置的差值* nextMonthDay 单元格位置该月份最后一天单元格位置的差值* nextFlag 是否为下个月日期*/function initCell(cell,date,days,nextMonthDay,nextFlag,month,week){ //将差值调整为日期。例如：0调整为1号，-1调整为上个月最后一天 date = date+1; var currentDateFlag = date_now.getDate()==date && month==date_now.getMonth(); var showDaysClass = currentDateFlag?"show_now":"hide"; var previousFlag = false; if(date<1){ date = getMonthDays(date_now.getMonth())+date; previousFlag = true; } if(nextFlag){ previousFlag = false; date = nextMonthDay+1; } var showCurClass = currentDateFlag?"current_date":((week==0 || week==6)?"rest_date":"normal_date"); cell.className=currentDateFlag?"selected":""; if(previousFlag){ showCurClass+="_pre"; showDaysClass+="_pre"; }else if(nextFlag){ showCurClass+="_next"; showDaysClass+="_next"; } //初始化时，如果是今天则设置为选中 selectedId = currentDateFlag?days:selectedId; cell.align="center"; var daysHtml = days>0?"第"+days+"天":""; var html = "<div id='"+days+"' onclick='showDayInfo(this)' onmouseenter='showDays(this,"+(currentDateFlag)+")'><label class='"+showCurClass+"'>"+date+"</label><br><label id='label_"+days+"' class='"+showDaysClass+"'>"+daysHtml+"</label></div>"; cell.innerHTML=html;}/*初始化日历表头*/function initCalendarHead(table){ var tr = table.insertRow(-1); var td = tr.insertCell(-1); var year = selectedMonth-1<0?selectedYear-1:selectedYear; var month = selectedMonth-1<0?selectedMonth+11:selectedMonth-1; td.innerHTML="<label class='button white' onclick='initCalendarNew(\"calendar\","+year+","+month+")' style='width:20px'>< </label>"; td.colSpan=2; td.align="right"; td = tr.insertCell(-1); td.innerHTML="<label>"+selectedYear+"年"+(selectedMonth+1)+"月</label><label onclick='initCalendarNew(\"calendar\","+date_now.getFullYear()+","+date_now.getMonth()+")' class='button white'>今天</label>"; td.colSpan=3; td.align="center"; td = tr.insertCell(-1); year = selectedMonth+1>11?selectedYear+1:selectedYear; month = selectedMonth+1>11?selectedMonth-11:selectedMonth+1; td.innerHTML="<label onclick='initCalendarNew(\"calendar\","+year+","+month+")' class='button white' style='width:20px'> ></label>"; td.align="left"; td.colSpan=2; tr = table.insertRow(-1); tr.height="30px"; var data = ["一","二","三","四","五","六","日"]; for(var i=0;i<data.length;i++){ td = tr.insertCell(-1); td.width="50px"; td.align="center" td.innerHTML="<label style='font-size:12px'>周"+data[i]+"</label>"; }}function getMonthDays(month){ var monthDays = 31; if(month ==4 || month==6 || month==9 || month==11) { monthDays = 30; }else if(month==2){ monthDays=28; if((selectedYear%4==0&& selectedYear%100!=0) || selectedYear%400==0){ monthDays = 29; } } return monthDays;}function calcStart(date){ var week = date.getDay(); week--; if(week<0){ week+=7; } return week;}/*** 兼容IE*/function parseDate(val){ val = val.replace(/-/g,"/"); return Date.parse(val);}/*** 鼠标滑过展示提示*/function showDays(div,currentFlag){ if(!currentFlag){ showIds.push(div.id); var obj = null; for(var i=0;i<showIds.length;i++){ obj = document.getElementById('label_'+showIds[i]); if(obj){ obj.className="hide"; } } //document.getElementById('label_37').style.display=""; obj = document.getElementById('label_'+div.id); if(obj){ obj.className="show"; setTimeout(function(){obj.className="hide";showIds.remove(div.id);},1000); } } }function message(msg){ var msgElement = document.getElementById("msg"); msgElement.innerHTML+=msg+"<br>";}function showDayInfo(parentDiv){ clearSelected(); document.getElementById(parentDiv.id).parentNode.className="selected"; selectedId=parentDiv.id;}function clearSelected(){ if(selectedId){ if(document.getElementById(selectedId)){ document.getElementById(selectedId).parentNode.className=""; } }}Array.prototype.remove = function(obj){ var length = this.length; var result = -1; for(var i=0;i<length; i++){ if(obj==this[i]){ result = i; this.splice(i,1); break; } } return result;}<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!----><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><title>日历</title> <link type="text/css" rel="stylesheet" href="babyCalendar.css"></link> <script type="text/javascript" src="babyCalendar.js"></script></head><body onload="init();"> <div> <div id="calendar"></div> <div id="calendarExt"></div> </div> <div id="msg"></div></body></html>
css文件：
.show,.show_now{ font-size:12px; color:green; display:"";}.hide ,.hide_pre,.hide_next{ display:none;} .rest_date{ font-size:18px; color:red;}.rest_date_pre,.rest_date_next{ font-size:18px; color:gray;}.current_date{ font-size:18px; color:green;}.normal_date{ font-size:18px; color:blue;}.normal_date_pre,.normal_date_next{ font-size:18px; color:gray;}.selected{ background-color:#B0C4DE;}div#calendar table,table.thinBorder{ border-collapse:collapse; border:none; margin-bottom:5px;}div#calendar td{ border:solid #696969 1px;}td.thinBorder{ border:solid #696969 1px; padding:5px 23px 5px 25px;}.label_button{ cursor:pointer; border:solid #696969 1px; background-image:-webkit-linear-gradient(top,#fff,#999); display:inline-block; /*-moz-linear-gradient(top,#000,#fff); -o-linear-gradient(top,,#000,#fff);*/}.button {display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: 2px 5px 2px;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.button:hover{text-decoration:none;}.button:active{position:relative;top:1px;}.white{color:#606060;border:solid 1px #b7b7b7;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));background:-moz-linear-gradient(top, #fff, #ededed);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');}.white:hover{background:#ededed;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));background:-moz-linear-gradient(top, #fff, #dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');}.white:active{color:#999;background:-webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));background:-moz-linear-gradient(top, #ededed, #fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');} 0 0
- js 生成日历控件
- js生成日历
- js生成当月日历
- js生成日历
- 生成日历
- js日历
- js日历
- JS 日历
- js日历
- JS日历
- JS日历
- js-日历
- js日历
- js 日历
- js日历
- JS日历
- js日历
- js日历
- wifi共享开启关闭代码
- Secret Number
- 第四十一讲 深入线程(操作线程的，执行，挂起，恢复，关闭 及 Join的用法)
- CyanogenMod 7
- C/C++中创建线程 -2013-09-20 12:46
- js生成日历
- 传球游戏 动态规划
- Python解析XML文档
- csdn外链工具，QQ1922028080自动收录，自动删除群发必备，召
- zigbee组网原理
- 黑马程序员_日期（二）——Calendar
- poj 1321棋盘问题
- Calculate S(n)
- spring mvc执行序列图实例
