js日历，利用Json传递数据，并附上日期显示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" rev="stylesheet" href="../css/member.css" type="text/css" />
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
#div1{margin:20px;display:none;}
#div2{margin:20px;position:absolute; top:320px;}
#nowTime{width:285px;float:left;}
#nextTime{width:285px;float:left;margin:0 0 0 10px;}
.mytitle{width:100%;height:30px;background:#17a4eb;color:#FFFFFF;position:relative;}
.mytitle .c{text-align:center;line-height:30px;}
.mytitle .l{position:absolute;top:6px;left:5px;}
.mytitle .r{position:absolute;top:6px;right:5px;}
table.tcss{width:100%; background:#dee3e9;color:#9ea7ac;}
table.tcss tr{background:#f9fafc;}
table.tcss th{width:46px;padding:5px; font-size:11px;}
table.tcss td{padding:5px;text-align:center;}
.red{color:#ff0000;}
.myblue{color:#0000ff;
background-color:#39F;
}
.green{
background-color:#6F0;
}
table .tcss td p{color:#FF0000;}
input{margin:20px;}
a{TEXT-DECORATION:none}
</style>
<script type="text/javascript" src="<%=basePath %>script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=basePath %>script/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
var aInput = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var oNowTime = document.getElementById('nowTime');
var oNextTime = document.getElementById('nextTime');
var aTd = document.getElementsByTagName('td');
// alert(oTd.length);
var aNowSpan = oNowTime.getElementsByTagName('span');
var aNextSpan = oNextTime.getElementsByTagName('span');
// var bBtn = true;
// aInput[2].onclick=function(){
var oDate = new Date();
// if(bBtn){
oDiv.style.display='block';
if(oDate.getMonth()+1==12){
showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
showDate(oNextTime,oDate.getFullYear()+1,1);
}else{
showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
}
// alert(oDate.getDate());
showColor(oDate.getDate());
showBtn();
hideLastTr();
getJson('nowTime');
getJson('nextTime');
/* }else{
oDiv.style.display='none';
}
*/
// bBtn = !bBtn;
// };
function showDate(obj,year,month,bBtn){
var oDate = new Date();
var dayNum = 0;
//没有Date则创建
if(!obj.bBtn){
obj.oTitle = document.createElement('div');
obj.oTitle.className='mytitle';
obj.appendChild(obj.oTitle);
var oTable = document.createElement('table');
$(oTable).addClass('tcss');
var oThead = document.createElement('thead');
var oTr = document.createElement('tr');
var arr =['周一','周二','周三','周四','周五','周六','周日'];
for(var i =0;i<7;i++){
var oTh = document.createElement('th');
oTh.innerHTML = arr[i];
if(i==5 || i==6){
oTh.className='red';
}
oTr.appendChild(oTh);
}
oThead.appendChild(oTr);
oTable.appendChild(oThead);
var oTbody = document.createElement('tBody');
for(var i = 0;i<6;i++){
var oTr = document.createElement('tr');
for(var j =0;j<7;j++){
var oTd = document.createElement('td');
oTr.appendChild(oTd);
}
oTbody.appendChild(oTr);
}
oTable.appendChild(oTbody);
obj.appendChild(oTable);
obj.bBtn = true;
}
obj.oTitle.innerHTML=(bBtn ? '<div class="l"><a href="javascript:void(0)"><<<span>'+(month-1)+'</span>月</a></div>'
:'<div class="r"><a href="javascript:void(0)"><span>'+(month+1)+'</span>月>></a></div>')
+'<div class="c"><span>'+year+'</span>年<span>'+month+'</span>月 </div>';
var aTd = obj.getElementsByTagName('td');
//每次刷新先清空
for(var i = 0;i<aTd.length;i++){
aTd[i].innerHTML='';
}
//清楚所有样式
/*
for(var k =0;k<$('#nowTime td').size();k++){
var bool = $('#nowTime td:eq('+k+')').hasClass('blue');
if(bool){
$('#nowTime td:eq('+k+')').uncorner();
}
}
for(var k =0;k<$('#nextTime td').size();k++){
var bool = $('#nextTime td:eq('+k+')').hasClass('blue');
if(bool){
$('#nextTime td:eq('+k+')').uncorner();
}
}
*/
for(var k = 0;k<$('td').size();k++){
$('td:eq('+k+')').uncorner();
$('td:eq('+k+')').removeAttr('class');
}
if(month==1 || month==3 || month==5 || month==7 || month==8
|| month == 10 || month==12){
dayNum = 31;
}
else if(month==4 || month==6 || month==9 || month==11){
dayNum=30;
}else if(month==2 && isLeapYear(year)){
dayNum = 29;
}else{
dayNum = 28;
}
oDate.setFullYear(year);
oDate.setMonth(month-1);
oDate.setDate(1);
switch(oDate.getDay()){
case 0:
for(var i =0;i<dayNum;i++){
aTd[i+6].innerHTML = i+1;
}
break;
case 1:
for(var i =0;i<dayNum;i++){
aTd[i+1].innerHTML = i+1;
}
break;
case 2:
for(var i =0;i<dayNum;i++){
aTd[i+2].innerHTML = i+1;
}
break;
case 3:
for(var i =0;i<dayNum;i++){
aTd[i+3].innerHTML = i+1;
}
break;
case 4:
for(var i =0;i<dayNum;i++){
aTd[i+4].innerHTML = i+1;
}
break;
case 5:
for(var i =0;i<dayNum;i++){
aTd[i+5].innerHTML = i+1;
}
break;
case 6:
for(var i =0;i<dayNum;i++){
aTd[i+6].innerHTML = i+1;
}
break;
}
/*
ajax('data.js?'+(+new Date),function(str){
var j = eval('('+str+')');
var now= 0;
for(var i = 0;i<aTd.length;i++){
if(aTd[i].innerHTML ==1){
now = i;
}
}
if(j.code){
for(var i =0;i<j.list.length;i++){
if(j.list[i]){
var oP = document.createElement('p');
oP.innerHTML = j.list[i];
aTd[i+now].appendChild(oP);
}
}
}
});
*/
if(month==1 && bBtn ){
obj.oTitle.getElementsByTagName('span')[0].innerHTML = 12;
}else if(month==12 && !bBtn){
obj.oTitle.getElementsByTagName('span')[0].innerHTML = 1;
}
}
function isLeapYear(year){
if(year%4==0 && year%100!=0){
return true;
}else{
if(year %400==0){
return true;
}else{
return false;
}
}
}
function showColor(date){
var result=[];
var oDate = new Date();
// var re = new RegExp("'+date+'(<p>)*");
var bBtn = true;
var index = 0;
// alert(oTd.length);
for(var i = 0;i<aTd.length;i++){
if(aTd[i].innerHTML !='')
{
result.push(aTd[i]);
}
}
if(aNowSpan[1].innerHTML==oDate.getFullYear() &&
aNowSpan[2].innerHTML==oDate.getMonth()+1){
for(var i = 0;i<result.length;i++){
// if(re.test(result[i].innerHTML)){
if(date==result[i].innerHTML && bBtn == true){
// alert(result[i].innerHTML);
// 区别于其它签到日期，当前签到日期设置为green
result[i].className ='green';
// $(result[i]).corner();
index = i;
bBtn = false;
}
}
//设置当前日期后10位蓝色字体显示
/*
for(len = index+10;index<len;index++){
result[index+1].className='blue';
}
*/
}
if(aNextSpan[1].innerHTML==oDate.getFullYear() &&
aNextSpan[2].innerHTML==oDate.getMonth()+1){
// for(var i = 0;i<result.length;i++){
for(var i = result.length-1;i>=0;i--){
// if(re.test(result[i].innerHTML)){
if(date==result[i].innerHTML && bBtn == true){
// alert(result[i].innerHTML);
result[i].className ='green';
index = i;
//只显示一次
bBtn = false;
}
}
//设置当前日期后10位蓝色字体显示
/*
for(len = index+10;index<len;index++){
result[index+1].className='blue';
}
*/
}
}
function showBtn(){
var leftMonth = parseInt(aNowSpan[0].innerHTML);
var leftYear = parseInt(aNowSpan[1].innerHTML);
var rightMonth = parseInt(aNextSpan[0].innerHTML);
var rightYear = parseInt(aNextSpan[1].innerHTML);
aNowSpan[0].parentNode.onclick = function(){
if(leftMonth == 12){
showDate(oNowTime,leftYear-1,leftMonth,true);
showDate(oNextTime,leftYear,1);
}else{
showDate(oNowTime,leftYear,leftMonth,true);
showDate(oNextTime,leftYear,leftMonth+1);
}
// 设置按钮事件
showBtn();
showColor(new Date().getDate());
hideLastTr();
getJson('nowTime');
getJson('nextTime');
};
aNextSpan[0].parentNode.onclick = function(){
if(rightMonth == 1 ){
showDate(oNowTime,rightYear,12,true);
showDate(oNextTime,rightYear+1,rightMonth);
}else{
showDate(oNowTime,rightYear,rightMonth-1,true);
showDate(oNextTime,rightYear,rightMonth);
}
showBtn();
showColor(new Date().getDate());
hideLastTr();
getJson('nowTime');
getJson('nextTime');
};
}
function hideLastTr(){
var bBtn = true;
var bBtn2 = true;
for(var i = 35;i<42;i++){
if( $('#div1 td:eq('+i+')').html() != ''){
bBtn = false;
}
}
if(bBtn){
for(var i = 35;i<42;i++){
$('#div1 td:eq('+i+')').hide();
}
}
else{
for(var i = 35;i<42;i++){
$('#div1 td:eq('+i+')').show();
}
}
for(var i = 77;i<84;i++){
if($('#div1 td:eq('+i+')').html() != ''){
bBtn2 = false;
}
}
if(bBtn2){
for(var i = 77;i<84;i++){
$('#div1 td:eq('+i+')').hide();
}
}
else{
for(var i = 77;i<84;i++){
$('#div1 td:eq('+i+')').show() ;
}
}
}
function setDigital( num, n){
var str = '' + num;
while(str.length<n){
str='0'+str;
}
return str;
}
function getJson(position){
$.getJSON("<%=basePath%>member/listMemberAttendance.htm",function(result){
var records = result;
for(var i=0;i<records.length;i++){
// alert(records[i]);
var date = records[i];
var yue = $('#'+position+' .c span:eq(1)').html();
var month = setDigital(yue,2);
var arr = date.split("-");
var monthArr = arr[1];
var dayArr = arr[2];
if(month==monthArr){
var $td = $('#'+position+' td');
for(var k = 0;k<$td.size();k++){
var str = $td[k].innerHTML;
if(str==dayArr){
// var $before = $('<a href="#">');
// var $after = $('</a>');
$('#'+position+' td:eq('+k+')').addClass('myblue');
$('#'+position+' td:eq('+k+')').corner();
}
}
}
}
});
}
});
</script>
</head>
<body >
<!-- <input type="text"/><input type="text"/><input type="button" value="确定"/>-->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<div class="content">
<div class="welcome">尊敬的${member.name }先生，下午好，欢迎来到XXX！<a class="blue" href="<%=basePath%>logOut.htm"><b>注销</b></a>
<a class="blue" href="<%=basePath%>member/saveMemberAttendance.htm"><b>我要签到</b></a>
<a class="blue" href="<%=basePath%>index.htm"><b>返回首页</b></a> </div>
<div class="main">
<%@include file="left.jsp" %>
<div class="right">
<div id="div1">
<div id = "nowTime"></div>
<div id = "nextTime"></div>
</div>
<div id="div2">
<p class="red">说明：<img src="/images/member/blueq.jpg" width="5%" height="5%"></img>已签到
<img src="/images/member/greenq.jpg" width="5%" height="5%"></img>当日签到
<img src="/images/member/greennq.jpg" width="5%" height="5%"></img>当前日期
</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>