版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24003469/article/details/82840991
**
JS+CSS+HTML制作动态黄历
**
<!DOCTYPE HTML>
<head>
<meta charset="utf-8" />
<title> a calendar of the 2018 year </title>
<style>
*{margin: 0;padding: 0;}
#container{
width: 300px;
height: 500px;
background: rgb(205,200,10);
margin: 50px auto;
}
#text
{
clear: both;
width: 280px;
height: 80px;
background: yellow;
margin: 10px 10px;
}
.active{
background: gold;
}
li{
background: #000;
list-style: none;
width: 80px;
height: 80px;
margin: 10px 10px;
float: left;
font: bold 28px "times new roman";
color: #FFF;
text-align: center;
}
#text p,#text h2
{padding: 10px 10px;}
</style>
<script>
window.onload=function()
{
var div=document.getElementById("container");
var li=div.getElementsByTagName("li");
var text=div.getElementsByTagName("div")[0];
var arr=[1,2,3,4,5,6,7,8,9,10,11,12];
for (var i=0;i<li.length;i++)
{
li[i].index=i;
li[i].onmouseover=function()
{
for(var j=0;j<li.length;j++)
{
li[j].className='';
}
this.className="active";
text.innerHTML= "<h2> activity in "+ (this.index+1) +"</h2><p>the following month is "+(this.index+1)+"</p>"
}
}
}
</script>
</head>
<body>
<div id="container">
<ul>
<li class="active"><h2> 1 </h2> <p> JAN</p> </li>
<li> <h2>2 </h2> <p>FEB</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>JUN</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 id="text">
<h2> activity in January</h2>
<p> the following month is 1 s month </p>
</div>
</div>
</body>