聯動日曆
聯動日曆： htmlhtml
<!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{ width:330px; float:left;} #nextTime { width:330px; float:left; margin:0 0 0 10px;} .title{ width: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{ width:100%; background:#dee3e9; color:#9ea7ac;} table tr{ background:#f9fafc;} table th{ width: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.jsajax
// 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'
}
}
}
}
相關文章
- 1. 日曆||三級聯動
- 2. js動態日曆
- 3. 三級聯動之生日聯動和地區聯動
- 4. 安卓自定義日曆滑動的日曆控件
- 5. vue之實現日曆----顯示農曆，滾動日曆監聽年月改變
- 6. vue農曆日曆
- 7. Java 周曆日曆
- 8. 日曆
- 9. 資源日曆 自然日曆_績效日曆呼籲參與
- 10. 日曆 / 日程表
- 更多相關文章...
- • RSS 歷史 - RSS 教程
- • SQLite 日期 & 時間 - SQLite教程
- • C# 中 foreach 遍歷的用法
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 日曆||三級聯動
- 2. js動態日曆
- 3. 三級聯動之生日聯動和地區聯動
- 4. 安卓自定義日曆滑動的日曆控件
- 5. vue之實現日曆----顯示農曆，滾動日曆監聽年月改變
- 6. vue農曆日曆
- 7. Java 周曆日曆
- 8. 日曆
- 9. 資源日曆 自然日曆_績效日曆呼籲參與
- 10. 日曆 / 日程表