純js簡單日曆實作程式碼_javascript技巧

;



標題>
>

body,ul,li,h2,p
{
margin:0px;
填充：0xp;
}
#div1
{
寬度：200px;
高度：200px;
背景：#ccc;

}
.月曆
{
寬度：240px;
.日曆
{
寬度：240px;
高度：345px ;
背景：#ccc;
邊距：自動;
}
.calendar ul
{
列表樣式：無；
寬度：232px；
高度：260px;
邊距：0px;
內邊距：0px;
}

.calendar ul li
{
寬度：45px;
高： 65px;
背景：#333;
浮動：左；
顯示：內聯；
左邊距：11px;
頂邊距：10px;
邊框：1px實線#ccc;
文字對齊：居中；
顏色：#FFF;

}
.calendar ul li:hover
{
邊框:1pxsolid #000; >
}
.text
{
背景：#F96;
邊距：10px;
底部填充：10px;
高度：45px}
底部填充：10px;
高度：45px}
底部填充：10px;
高度：45px}
}
}
.text h2
{
顯示：內聯；

}
.active
{
背景：#FFF！重要;
顏色：#C03！重要;
}

樣式>

/* window.onload=function()
{
var oBtn =document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(
{
oDiv.innerHTML=oTxt.value;
}

}*/
window.onload=function()
{
var aLi= docum. getElementsByTagName('li');
var Otxt =document.getElementById('tab').getElementsByTagName('div')[0];
var aDats =['元旦1月1日','2月14日情人節','3月3日全國愛耳日',
'4月1日愚人節','5月1日國際勞動節','6月1日國際兒童節',
'7月1日中國共產黨誕生日','8月1日中國人民解放軍建軍節','9月10日中國教師節'、
'10月1日中華人民共和國國慶日' 、'11月9日消防宣導日'、'12月3日世界貧窮日'
]；

var i=0;
for(i=0;i{
aLi[i].index=i;
aLi[i].onmouseover =function() // 新增滑鼠指向事件
{

for(i=0;i{
aLi[i].className ='';
}
this.className ='active'; // 為目前標籤加上active樣式

Otxt.innerHTML ='

' (this.index 1) '

' '月' '

' aDats[this.index] '

';
}

}

};

腳本>
頭>

;


• 1

  JAN




• 2

  FER



• 3

  三月




• 4

  APR




5

可能




• 6

  JUM




• 7

  七月




• 8

  8月

  li>
  

• 9

  SEP




• 10

  OCT




• 11

  NOV




• 12

  DEC p>