calendar: JavaScript日曆

來源:互聯網
上載者:User

txer:JavaScript日曆


<HTML>
<HEAD>
<TITLE>txer:JavaScript日曆</TITLE>
<!--
=================================================
= =
= Author: tianxueer@gmail.com, 2007 =
= =
=================================================
//-->
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
a:link{text-decoration:none;color:black}
a:hover{text-decoration:underline;color:red}
a:active{text-decoration:none;}
a:visited{text-decoration:none;color:black}

/*第一個表格(顯示年、月輸入框和上一個、下一個按鈕)*/
table.one
{
border-collapse:separate;
border-spacing:1px 1px;
font-family:verdana;
color:#9DB34E;//表格一的文字顏色;
text-align:center;
font-size:10pt;
width:176px;
border:1px solid #A6FE8A;
cursor:default;
text-align:center;
background-color:#A6FE8A;//表格一的背景色;
}

/*第二個表格(顯示日、一、二、三、....)*/
table.two
{
border-collapse:separate;
border-spacing:1px 1px;
font-family:verdana;
color:#9DB34E;//表格一的文字顏色;
text-align:center;
font-size:10pt;
width:176px;
border:1px solid #A6FE8A;
cursor:default;
text-align:center;
background-color:#A6FE8A;//表格二的背景色;
color:#000000;//表格二的文字顏色;
border-bottom:none;
}

/*第三個(顯示日期)表格*/
table.three
{
border-collapse:separate;
border-spacing:1px 1px;
font-family:verdana;
color:#9DB34E;//表格一的文字顏色;
text-align:center;
font-size:10pt;
width:176px;
border:1px solid #A6FE8A;
cursor:default;
text-align:center;
border-top:none;
color:#000000;//表格三的文字顏色;
font-size:8pt;
background-color:#ffffff;//表格三的背景色;
cursor:default;
}


/*定義輸入年月的input樣式*/
input.shuru
{
border:0px;
background-color:#A6FE8A;
font-size:10pt;
text-align:center;
font-family:verdana;
color:#9DB34E;
}

/*定義上一年,下一年那幾個按鈕的樣式*/
input.anniu
{
border:0px;
background-color:#A6FE8A;
font-size:10pt;
text-align:center;
font-family:verdana;
color:#9DB34E;

width:16px;
font-size:7pt;
align:center;
size:6;
}

</style>
</HEAD>
<BODY>

<script type="text/javascript">

var out="<div id='div1' style=/"position:relative ;z-index:0;visibility:visible/">";
out+="<form><table class='one' id='one'><tbody>";
out+="<tr>";
out+="<td><input type='button' class='anniu' style=/"cursor:pointer/" onclick='change(1)' title='上一年' onmouseover=/"this.style.color='black'/" onmouseout=/"this.style.color=''/" onfocus=/"blur()/" value='<<'></td>";
out+="<td><input type='button' class='anniu' style=/"cursor:pointer/" onclick='change(2)' title='上一月' onmouseover=/"this.style.color='black'/" onmouseout=/"this.style.color=''/" onfocus=/"blur()/" value='<'></td>";
out+="<td><input class='shuru' type='text' id='year' size=3 onkeydown=/"if (event.keyCode==13) {set();this.style.borderBottom='';blur();}/" onblur=/"set();this.style.borderBottom=''/" onfocus=/"this.style.borderBottom='1px solid #FFD700'/">年</td>";
out+="<td><input class='shuru' type='text' id='month' size=1 onkeydown=/"if (event.keyCode==13) {set();this.style.borderBottom='';blur();}/" onblur=/"set();this.style.borderBottom=''/" onfocus=/"this.style.borderBottom='1px solid #FFD700'/">月</td>";
out+="<td><input type='button' class='anniu' style=/"cursor:pointer/" onclick='change(3)' title='下一月' onmouseover=/"this.style.color='black'/" onmouseout=/"this.style.color=''/" onfocus=/"blur()/" value='>'></td>";
out+="<td><input type='button' class='anniu' style=/"cursor:pointer/" onclick='change(4)' title='下一年' onmouseover=/"this.style.color='black'/" onmouseout=/"this.style.color=''/" onfocus=/"blur()/" value='>>'></td>";
out+="</tr></tbody></table><table class='two' id='two'><tbody>";
out+="<td style=/"color:#ff0000/">日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td style=/"color:#ff0000/">六</td>";//日,六的背景色;
out+="</tr></tbody></table><table class='three' id='three'><tbody>";
for (i=0;i<6;i++)
{
out+="<tr id='t"+ i +"'><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>";//此處加&nbsp;是因為:如果不加,則沒有td的firstChild,後面不能使用document.getElementById(tr).childNodes[j].firstChild.nodeValue,這是DOM中一個很容易犯錯誤的地方
}
out+="</tbody></table></form>";
out+="</div>";

document.write(out);

var year=document.getElementById('year');
var month=document.getElementById('month');

var length;
var length_month;
//form_data,form_year,form_month只是為第一次進入頁面而用,後面就都用year.value,month.value,其中year就是text元素year,month一樣
//獲得當天日期
var form_date=new Date();
var form_month=form_date.getMonth()+1;
var form_year=form_date.getFullYear();
var form_today=form_date.getDate();
var tmp_year;//用於set();
var tmp_month;

//填入年和月text中今日日期
year.value=form_year;
month.value=form_month;

tmp_year=form_year;
tmp_month=form_month;


//當點擊上一年,上一月等按鈕時
function change(n)
{
switch (n)
{
case 1:
if (year.value==1)
year.value=9999;
else
--year.value;
break;

case 2:
if (month.value==1)
month.value=12;
else
--month.value;
break;
case 3:
if (month.value==12)
month.value=1;
else
++month.value;
break;
case 4:
if (year.value==9999)
year.value=1;
else
++year.value;
break;
}
set();//改變資料,然後顯示
}

function show()
{

//得到當前月有幾天
var length_month=flength_month();

//獲得當前月的第一天是星期幾
var first=new Date(year.value,month.value-1,1);
var first_day=first.getDay();

var date_num=1;

for (i=0;i<6;i++)
{
for (j=0;j<7;j++)
{
tr='t'+i;
if ((i==0) && (j<first_day))//第一天前面的空白
{
document.getElementById(tr).childNodes[j].firstChild.nodeValue="";
document.getElementById(tr).childNodes[j].style.backgroundColor="#A6FE8A";//日期顯示地區無日期的背景色;
document.getElementById(tr).childNodes[j].style.cursor="";
}
else if (date_num<=length_month)//日期
{

if ((year.value==form_year) && (month.value==form_month) && (date_num==form_today))//當天
{
document.getElementById(tr).childNodes[j].style.backgroundColor="#8FE111";//日期顯示地區當天的背景色;
document.getElementById(tr).childNodes[j].style.color="#ffffff"
document.getElementById(tr).childNodes[j].title="今天";
}
else//其他普通日期
{
document.getElementById(tr).childNodes[j].style.backgroundColor="#A6FE8A";//日期顯示地區有日期的背景色;
document.getElementById(tr).childNodes[j].style.color="#333333"
}


document.getElementById(tr).childNodes[j].style.cursor="pointer";
document.getElementById(tr).childNodes[j].firstChild.nodeValue=date_num;//顯示日期
date_num++;
}
else
{
document.getElementById(tr).childNodes[j].firstChild.nodeValue="";//是日期後面的內容為空白,如上月有31,而這個月沒有,那麼就要清除31
document.getElementById(tr).childNodes[j].style.backgroundColor="#A6FE8A";//日期顯示地區無日期的背景色;
document.getElementById(tr).childNodes[j].style.cursor="";
}
if (i==5 && j==6)
{
document.getElementById(tr).childNodes[j].firstChild.nodeValue="T";//摁下此處,回到今日
document.getElementById(tr).childNodes[j].style.cursor="pointer";
document.getElementById(tr).childNodes[j].title="Today is: "+form_year+"年"+form_month+"月"+form_today+"日";
}

}
}

}

//當手動改變年和月input text時,先判斷到底是否改變(因為有可能改了半天,最後又改回了原來的值)
function set()
{
if (year.value>=1 && year.value<=9999 && month.value<=12 && month.value>=1)//如果輸入正確
{
if (tmp_year!=year.value || tmp_month!=month.value)//如果改變了年和月中任意一個,則重新顯示
{
tmp_year=year.value;
tmp_month=month.value;
}
show();
}
else//如果輸入不正確,返回輸入前的值
{
year.value=tmp_year;
month.value=tmp_month;
}
}

//為td添加滑鼠划過時改變顏色
for (i=0;i<6;i++)
{
t='t'+i;
n=document.getElementById(t);
for (j=n.firstChild;j!=null;j=j.nextSibling)
{
j.onmouseover=function() {c=this.style.backgroundColor;this.style.backgroundColor='#FF33FF';};//日期顯示地區滑鼠划過時的背景色;
j.onmouseout=function() {this.style.backgroundColor=c;};
if ((i==5) && (j.nextSibling==null))//尋找返回今日(GO TO TODAY!)的按鈕
j.onclick=function() {year.value=form_year;month.value=form_month;set();};
}
}

function flength_month()//用來獲得每月的最多天數
{
length=new Array(31,0,31,30,31,30,31,31,30,31,30,31);//每個月的日期列表
length[1]=(((year.value%4==0) && (year.value%100!=0))||(year.value%400==0))?29:28;//判斷當年二月有多少天
return length[month.value-1];
}

show();

</script>


</BODY></HTML>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.