联动日历

联动日历: 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{ 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.js

1
2
3
4
5
6
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
/**
 * @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'
             }
        }
         
    }
}

  

 

posted @   miyaye  阅读(273)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示

随笔分类 (122)