联动日历： html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1</title> <meta name="author" content="Administrator" /> <script src="rili.js"></script> <!-- Date: 2015-05-02 --> <style> *{ margin:0; padding:0; font-size:12px;} input{border:1px solid #4a4a4a;} #div1{ margin:20px; position:absolute; top:25px; left:10px; display:none;} #nowTime{ 330px; float:left;} #nextTime { 330px; float:left; margin:0 0 0 10px;} .title{ 100%; height:30px; background:#17a4eb; color:#FFFFFF; position:relative;} .title .c{ text-align:center; line-height:30px;} .title .l{ position:absolute; top:6px; left:5px;} .title .r{ position:absolute; top:6px; right:5px;} table{ 100%; background:#dee3e9; color:#9ea7ac;} table tr{ background:#f9fafc;} table th{ 46px; padding:5px;} table td{ padding:5px; text-align:center;} .red{ color:#FF0000;} .blue{ color:#0000FF;} table td p{ color:#FF0000;} input{ margin:20px;} </style> <script src="rili.js"></script> <script src="ajax.js"></script> </head> <body> <input type="text" /> <input type="text" /> <input type="button" value="确定" /> <div id="div1"> <div id="nowTime"></div> <div id="nextTime"></div> </div> </body> </html>
data.js
// JavaScript Document
{
code : 1,
list : [1,6,8,,,,124,77,8,999,11,,,,,666,111,5,5,5,,666,111,5,5,5]
}
ajax.js
function ajax(url, fnOnSucc, fnOnFaild)
{
var oAjax=null;
//1.初始化Ajax对象
if(window.ActiveXObject)
{
oAjax=new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
oAjax=new XMLHttpRequest();
}
//2.建立连接
oAjax.open('get', url, true);
//3.监控请求状态
oAjax.onreadystatechange=function ()
{
//readyState->Ajax对象内部的状态
//status->服务器返回的请求结果
if(oAjax.readyState==4)
{
//alert('请求完成，请求结果是：'+oAjax.status);
//alert(oAjax.responseText);
if(oAjax.status==200)
{
if(fnOnSucc)
{
fnOnSucc(oAjax.responseText);
}
}
else
{
if(fnOnFaild)
{
fnOnFaild(oAjax.status);
}
}
}
//alert(oAjax.readyState);
//alert(typeof oAjax.status);
};
//4.发送请求
oAjax.send();
//5.*清理
//oAjax.onreadystatechange=null;
//oAjax=null;
}
function ajaxPost(url, sData, fnOnSucc, fnOnFaild)
{
var oAjax=null;
//1.初始化Ajax对象
if(window.ActiveXObject)
{
oAjax=new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
oAjax=new XMLHttpRequest();
}
//2.建立连接
oAjax.open('post', url, true);
//3.监控请求状态
oAjax.onreadystatechange=function ()
{
//readyState->Ajax对象内部的状态
//status->服务器返回的请求结果
if(oAjax.readyState==4)
{
//alert('请求完成，请求结果是：'+oAjax.status);
//alert(oAjax.responseText);
if(oAjax.status==200)
{
if(fnOnSucc)
{
fnOnSucc(oAjax.responseText);
}
}
else
{
if(fnOnFaild)
{
fnOnFaild(oAjax.status);
}
}
}
//alert(oAjax.readyState);
//alert(typeof oAjax.status);
};
//4.发送请求
oAjax.setRequestHeader('content-type', 'urlencode');
oAjax.send(sData);
}
rili.js
/**
* @author Administrator
*/
window.onload=function(){
/*获取三个Input*/
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');
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';
/*如果最后一个月是12月 下个月为第二年的1月*/
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);//true 代表是生成在坐标还是生成在右边 不带true代表下个月
showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
}
showColor(oDate.getDate());
showBtn();//左右按钮可点击
showClick();//点击td后 当前 日期 金额填入输入框
hideLastTr()
}else{
oDiv.style.display = 'none'
}
bBtn = !bBtn;
}
/*showDate*/
function showDate(obj , year, month,bBtn ){
var oDate = new Date();
var dayNum = 0;
/*obj代表当前div 和 下个月div 点击确定按钮的时候 只生成一次日历 当obj.bBtn不存在的时候生成*/
if(!obj.bBtn){
obj.oTitle = document.createElement('div');
obj.oTitle.className = "title";
obj.appendChild(obj.oTitle);
/*添加tHead*/
var oTable = document.createElement('table');
var oThead = document.createElement('tHead'); //ie下table的innerHTML会报错
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);
/*添加日期 tbody*/
var oTbody = document.createElement('tBody');
/*最多6行*/
for(var i=0;i<6;i++){
var oTr = document.createElement('tr');
/*每行7列*/
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加内容*/
var classLR = null , monthLR = null ;
//当bBtn存在的时候, 就是往oNowTime里加日期 左侧的月份为传进去的月份减1
if( bBtn ){
classLR = 'l';
monthLR = month-1;
}else{ //当bBtn不存在的时候, 就是往oNextTime里加日期右侧的月份为传进去的月份加1
classLR = 'r';
monthLR = month+1;
}
obj.oTitle.innerHTML = '<div class="'+classLR+'"><span>'+monthLR+'</span>月</div><div class="c"><span>'+year+'</span>年<span>'+month+'</span>月</div>'
/**每次点击的时候 让所有td的内容为空**/
var aTd = obj.getElementsByTagName('td');//注意这里是obj获取所有的td 不是document
for( var i=0;i < aTd.length ; i++ ){
aTd[i].innerHTML=''
}
/*判断天数 闰年2月29天 闰年 能被4整除 但不能被100整除 或者能被400整除*/
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 = 28
}else{
dayNum = 29
}
/*设置日期 找当月的第一天 对应周几 找到1号在哪个td 后面的顺延*/
oDate.setFullYear(year);
oDate.setMonth(month-1);
oDate.setDate(1);
/*oDate.getDay() 星期*/
switch(oDate.getDay()){
case 0: //如果1号是周日,周日对应的是第7个td
for(var i=0;i<dayNum ; i++){
aTd[i+7].innerHTML= i+1;//第7个td设为1号 i是从0开始 所以要+1
}
break;
case 6:
for(var i=0;i<dayNum ; i++){
aTd[i+6].innerHTML= i+1;
}
break;
case 5:
for(var i=0;i<dayNum ; i++){
aTd[i+5].innerHTML= i+1;
}
break;
case 4:
for(var i=0;i<dayNum ; i++){
aTd[i+4].innerHTML= i+1;
}
break;
case 3:
for(var i=0;i<dayNum ; i++){
aTd[i+3].innerHTML= i+1;
}
break;
case 2:
for(var i=0;i<dayNum ; i++){
aTd[i+2].innerHTML= i+1;
}
break;
case 1:
for(var i=0;i<dayNum ; i++){
aTd[i+1].innerHTML= i+1;
}
break;
}
/*ajax 添加金额 */
ajax('data.js?'+Math.random(),function(s){
var j = eval('('+s+')');
var iNow = 0;
/*找出1号在td中的位置*/
for( var i = 0; i< aTd.length ;i++ ){
if( aTd[i].innerHTML ==1 ){
iNow = i;
}
}
/*如果j.code==1 存在的时候*/
if(j.code){
for( var i = 0; i< j.list.length ; i++ ){
/*如果data list 数组中有值的话 就给iNow+i的 td加金额*/
if( j.list[i] ){
var p = document.createElement('p');
p.innerHTML=j.list[i]+'元';
aTd[iNow + i].appendChild(p)
}
}
}
})
/**如果iNowTime的月份是1月,那么左侧的月份应该是12 **/
/**如果iNextTime的月份是12月,那么右侧的月份应该是1 **/
if( month ==1 && bBtn ){ //bBtn 是判断左侧 的 也就是iNowTime的div
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;
}
}
}
/*showColor*/
function showColor(date){
var result=[];
var bBtn = true;
var index=0;
var re = new RegExp(''+date+'(<p>)*');//* 至少出现0次 就是p有没有都可以
for( var i = 0; i< aTd.length ; i++ ){
if( aTd[i].innerHTML !=''){
result.push(aTd[i])
}
}
/*当前日期变红*/
/*判断当前日期在oNowTime div内*/
var oDate = new Date();
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 ) && bBtn ){
result[i].className ='red';
index = i;
bBtn = false; //只要找到一个当前日期 立马变为false,只找一次,当前日期的div内找
}
}
/*让当前日期 的后十项都变为蓝色*/
var len = index +11;
for( len; index +1 < len; index++ ){
result[index+1].className ='blue'
}
}else{
for( var i = 0; i < result.length ; i++ ){
result[i].className=''
}
}
}
/*showBtn*/
function showBtn(){
var leftYear = parseInt(aNowSpan[1].innerHTML);
var leftMonth = parseInt(aNowSpan[0].innerHTML);
var rightYear = parseInt(aNextSpan[1].innerHTML);
var rightMonth = parseInt(aNextSpan[0].innerHTML);
aNowSpan[0].parentNode.onclick=function(){
/*如果oNowTime左侧月份是12月份 点击之后 当前年份要减去1 下个月月份变成1 */
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();// 可以点击n多次
showColor( (new Date).getDate() );
hideLastTr()
}
aNextSpan[0].parentNode.onclick=function(){
/*如果oNowTime左侧月份是12月份 点击之后 当前年份要减去1 下个月月份变成1 */
if( rightMonth == 1 ){
showDate( oNowTime, rightYear+1,12 , true );
showDate( oNextTime, rightYear+1,rightMonth );
}else{
showDate( oNowTime, rightYear,rightMonth-1 , true );
showDate( oNextTime, rightYear,rightMonth );
}
showBtn();// 可以点击n多次
showColor( (new Date).getDate() );
hideLastTr()
}
}
/*showClick*/
function showClick(){
var re = /(d+)((<p>)*)/;
var oDate = new Date();
/*红色的或蓝色的可点击*/
for( var i = 0; i < aTd.length ; i++ ){
aTd[i].index = i;
aTd[i].onclick = function(){
if( this.className =='red' || this.className =='blue' ){
if( this.index > aTd.length/2 ){ //右边
if( oDate.getMonth()+2 ==1 ){
this.innerHTML.replace( re , function($0, $1){
aInput[0].value =( oDate.getFullYear()+1) +'-' + (oDate.getMonth()+1) +'-'+$1
})
}else{
this.innerHTML.replace(re,function($0,$1){
aInput[0].value = oDate.getFullYear() +'-' + (oDate.getMonth()+2) + '-' + $1;
});
}
}else{
this.innerHTML.replace( re , function($0, $1){
aInput[0].value = oDate.getFullYear() +'-' + (oDate.getMonth()+1) +'-'+$1
})
}
}
if( this.getElementsByTagName('p')[0] ){
aInput[1].value = this.getElementsByTagName('p')[0].innerHTML
}else{
aInput[1].value = ''
}
oDiv.style.display='none';
bBtn = true
}//end click
}
}
/*hidelastTr*/
function hideLastTr(){
var bBtn = true;
var bBtn2 = true;
for( var i = 35;i < 42; i++ ){
if( aTd[i].innerHTML!='' ) bBtn = false
}
if( bBtn ){
for( var i = 35;i < 42; i++ ){
aTd[i].style.display ='none'
}
}
for( var i = 77;i < 84; i++ ){
if( aTd[i].innerHTML!='' ) bBtn2 = false
}
if( bBtn2 ){
for( var i = 77;i < 84; i++ ){
aTd[i].style.display ='none'
}
}
}
}