Show toolbar

2011年10月3日 星期一

JavaScript Calendar

標題：JavaScript年曆範例
JavaScript (index.html)：
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
<script type="text/javascript">
var codeboxy = new function() {
var year = new Date().getFullYear();
return {
refresh : function() { //刷新年曆
year = document.getElementById("getyear").value;
document.getElementById("show").innerHTML = "";
this.init();
},
showmonth : function(s, m) { //列印月份
var output = "";
var day=1;
output += " SUN MON TUE WED THU FRI SAT\n";
for(var i=1;i<=m+s;i++) {
if(i<=s) {
output += " ";
} else {
output += " " + this.zero(day);
if((i%7)==0)
output += "\n";
day++;
}
}
output += "\n";
return output;
},
zero : function(num) { //空格補償
if(num<10)
num = " " + num;
return num;
},
init : function() { //初始年曆參數
space = ((year-1)+parseInt((year-1)/4)-parseInt((year-1)/100)+parseInt((year-1)/400)+1)%7;
for(m=1;m<=12;m++) {
if(m==4||m==6||m==9||m==11)
month=30;
else if(m==2&&(year-1980)%4==0)
month=29;
else if(m==2)
month=28;
else
month=31;
document.getElementById("show").innerHTML += "\nMonth: " + m + "\n" + this.showmonth(space,month);
space=(space+month)%7;
}
}
};
};
window.onload = function () {
codeboxy.init();
};
</script>
Year: <input type="text" id="getyear" />
<button onclick="codeboxy.refresh();">Get</button>
<pre id="show"></pre>
說明：
以JavaScript採Class方式撰寫年曆範例程式。

範例：
Year: 
Month: 1
 SUN MON TUE WED THU FRI SAT
               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

Month: 2
 SUN MON TUE WED THU FRI SAT
                           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

Month: 3
 SUN MON TUE WED THU FRI SAT
                           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

Month: 4
 SUN MON TUE WED THU FRI SAT
           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

Month: 5
 SUN MON TUE WED THU FRI SAT
                   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


Month: 6
 SUN MON TUE WED THU FRI SAT
   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

Month: 7
 SUN MON TUE WED THU FRI SAT
           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

Month: 8
 SUN MON TUE WED THU FRI SAT
                       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

Month: 9
 SUN MON TUE WED THU FRI SAT
       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

Month: 10
 SUN MON TUE WED THU FRI SAT
               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

Month: 11
 SUN MON TUE WED THU FRI SAT
                           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

Month: 12
 SUN MON TUE WED THU FRI SAT
       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
Posted by QQBoxy
Tag - , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)