js日历，利用Json传递数据，并附下日期显示 _JavaScript

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 >

<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>