实现思路:
1.月份是放在li里面的,给月份的li添加onmouseover事件,
2.创建一个数组,在里面放每个月的节日;当月份li触发onmouseover事件时显示当前月的节日
代码如下:
var oLi = document.getElementsByTagName("li");
var oStr = document.getElementById("msg").getElementsByTagName("strong")[0];
var oP = document.getElementById("msg").getElementsByTagName("p")[0];
var Inn = [
"元旦:1月1日至3日放假三天。",
"春节:2月2日至8日放假7天。",
"妇女节:3月8日妇女节,与我无关。",
"清明节:4月3日至5日放假3天",
"劳动节:4月30日至5月2日放假3天。",
"端午节:6月4日至6日放假3天。",
"小暑:7月7日小暑。不放假。",
"七夕节:8月6日七夕节。不放假。",
"中秋节:9月10日至12日放假3天。",
"国庆节:10月1日至7日放假7天。",
"立冬:11月8日立冬。不放假。",
"艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
];
for (var i = 0; oLi.length; i++) {
oLi[i].index =i; /*数组索引赋值*/
oLi[i].onmouseover = function () {
for (var j = 0; j < oLi.length; j++) {
oLi[j].className = "";
this.className = "current"; /*触发月份事件时的样式*/
oStr.innerHTML = this.index+1;/*显示鼠标当前停留的月份*/
oP.innerHTML = Inn[this.index];/*显示当前月的节日*/
}
}
}
css代码:
body,
ul,
li,
h2,
p {
margin: 0;
padding: 0;
}
body {
font-family: 12px/1.5 Tahoma;
}
#calender {
width: 248px;
background: #eaeaea;
margin: 10px auto;
padding: 0 0 10px 10px;
}
#calender ul {
overflow: hidden;
zoom: 1;
}
#calender li {
color: #fff;
float: left;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 14px;
text-align: center;
background: #424242;
line-height: 1.3;
list-style-type: none;
border: 1px solid #424242;
margin: 10px 10px 0 0;
padding: 5px;
}
#calender li.current {
color: #f69;
background: #fff;
}
#calender li strong {
display: block;
font-size: 18px;
}
#msg {
color: #666;
background: #f1f1f1;
border: 1px solid #fff;
margin: 10px 10px 0 0;
padding: 5px;
}
#msg h2 {
font-size: 14px;
}
html5代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易万年历</title>
<link rel="stylesheet" href="y.css">
</head>
<body>
<div id="calender">
<ul>
<li><strong>1</strong>JAN</li>
<li><strong>2</strong>FER</li>
<li><strong>3</strong>MAR</li>
<li><strong>4</strong>APR</li>
<li><strong>5</strong>MAY</li>
<li class="current"><strong>6</strong>JUN</li>
<li><strong>7</strong>JUL</li>
<li><strong>8</strong>AUG</li>
<li><strong>9</strong>SEP</li>
<li><strong>10</strong>OCT</li>
<li><strong>11</strong>NOV</li>
<li><strong>12</strong>DEC</li>
</ul>
<div id="msg">
<h2><strong>6</strong>月节日</h2>
<P>端午节:6月4日至6日放假3天。</P>
</div>
</div>
<script src="y.js"></script>
</body>
</html>