<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单日历表</title>
<style>
body,ul,li,h2,p{
padding:0px;
margin:0px;
}
.calendar{
240px;
height:350px;
background:#ccc;
margin:auto;
}
.calendar ul{
list-style: none;
232px;
height:260px;
padding:0px;
}
.calendar ul li{
45px;
height:65px;
background:#333;
float:left;
margin-left:11px;
margin-top:10px;
border:1px solid #ccc;
color:#FFF;
text-align:center;
}
.text{
background:#F96;
margin:10px;
height:45px;
padding-bottom:10px;
}
.text h2{
display:inline;
}
.active{
background:#FFF !important;
color:#C03 !important;
}
</style>
<script>
window.onload=function()
{
var arr=[
'元旦1月1日',
'2月14日情人节',
'3月3日全国爱耳日',
'4月1日愚人节',
'5月1日国际劳动节',
'6月1日 国际儿童节',
'7月7日七夕节',
'8月1日中国人民解放军建军节',
'9月10日中国教师节',
'10月1日中华人民共和国国庆节',
'11月9日消防宣传日',
'12月3日世界残疾人日'
];
var oDiv=document.getElementById('tab');
var aLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
for(var i=0; i<aLi.length; i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function()
{
for(var i=0; i<aLi.length; i++)
{
aLi[i].className='';
}
this.className='active';
oTxt.innerHTML ='<h2>'+(this.index+1)+'</h2>'+'月'+'<p> '+arr[this.index]+'</p>';
}
}
};
</script>
</head>
<body>
<div class="calendar" id="tab">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUM</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
</div>
</div>
</body>
</html>
file:///E:/日历表.html