Html
<!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>
<link rel="stylesheet" href="日历样式.css" type="text/css" />
<script src="日历Js.js" type="text/javascript"></script>
</head>
<body>
<div id="table">
<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>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 class="div1">
<h2>一月活动</h2>
<p>快过年了，大家商量着去哪玩啊</p>
</div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
#table{
width:300px;
height:700px;
background-color:#CCC;
text-align:center;
position:absolute;
margin:0 600px 0 500px;
}
#table ul{
line-height:10px;
}
#table ul li{
float:left;
padding:20px;
list-style-type:none;
}
#table .div1{
width:300px;
height:200px;
background:red;
position:absolute;
bottom:0px;
}
#table ul h2 {
color:#FFF;
}
#table ul p {
color:#FFF;
}
.active{
background-color:black;
}
Js
// JavaScript Document
window.onload=function()
{
var arr=[
‘ 一月‘,
‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘,
]
var aTal=document.getElementById(‘table‘);
var aLi=aTal.getElementsByTagName(‘li‘);
var aDiv1=aTal.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";
aDiv1.innerHTML= ‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+arr[this.index]+‘</p>‘;
}
}
时间： 2024-10-06 09:26:57