简单日历表

<!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