js生成日历
2014-04-30 22:23
274 查看
算法:
1. 根据指定年份和月份,计算该月第一天的起始位置和最后一天的结束位置
2.第一个单元格到起始位置,填充上个月日期或空白
3.起始位置和结束位置填充该月日期
4.结束位置之后填充下个月日期或空白
效果图:
JS代码:
html页面:
css文件:
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页面:
<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'); }
相关文章推荐
- JavaScript有三种方法,可以确定一个值到底是什么类型。
- JSF教程(7)——生命周期之Restore View Phase
- JSF教程(6)——生命周期中处理请求
- JSF教程(5)——生命周期概述(续)
- JSF教程(4)——生命周期概述
- 使用JS打开小窗口显示图片
- 九度1447:最短路Floyd+Dijstral图最短路径算法(动态规划F:O(N^3)+D:O(N^2))
- js实现前台导出
- JSON解析与序列化
- html js的各种触发事件效果
- js控制输入
- js原型链
- JS-->Documeng各种事件
- js局部变量,参数
- three.js学习 函数使用方法散记2
- 谷歌浏览器javascript调试教程
- Javascript中的void
- JSP/SERVLET入门教程--Servlet 使用入门 温习
- Javascript中的正则表达式
- js判断浏览器类型以及IE版本