1.样式表
2.js部分
3.div部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>日历表</title>
<link rel="stylesheet" href="jingdongshouye.css">
<style>
#content{
width:350px;
height:500px;
background:#ceda9e;
margin:0 auto;
}
#yueFen{
width:300px;
height:370px;
/*background: #4ddaa3;*/
margin:30px 25px 0px 25px;
}
#yueFen ul{
margin:15px;
}
#yueFen ul li{
width:80px;
height:80px;
background:#da2fb4;
margin:5px;
float:left;
font-size:20px;
border-radius:5px;
text-align:center;
line-height:30px;
cursor:pointer;
}
#yueFen ul .active{
background:red;
}
#jiHua{
width:300px;
height:90px;
background:#FFF;
margin:20px 20px 10px 25px;
border-radius:10px;
}
#jiHua p,#jiHua h2{
font-size:15px;
font-family:微软雅黑;
}
</style>
<script>
window.onload=function () {
var oDate=['1月到了,我们该点什么',
'2月到了,英国威斯敏斯特大学的研究人员发现',
'3月到了,一种能引起心脏病的物质含量较高,因此,在7:21之后起床对身体健康更加有益',
'4月到了,打开台灯一醒来,就将灯打开,这样将会重新调整体内的生物钟',
'5月到了,调整睡眠和醒来模式。”拉夫堡大学睡眠研究中心教授吉姆·霍恩说。喝一杯水',
'6月到了,是身体内成千上万化学反应得以进行的必需物质。早上喝一杯清水,可以补充晚上的缺',
'7月到了,在早饭之前刷牙。“在早饭之前刷牙可以防止牙齿的腐蚀,因为刷牙之后',
'8月到了,可以在牙齿外面涂上一层含氟的保护层。要么,就等早饭之后半小时再刷牙',
'9月到了,英国牙齿协会健康和安全研究人员戈登·沃特金斯说。',
'10月到了,吃早饭。“早饭必须吃,因为它可以帮助你维持血糖水平的稳定',
'11月到了,”伦敦大学国王学院营养师凯文·威尔伦说。早饭可以吃燕麦粥等,这类食物具有较低',
'12月到了,避免运动。来自布鲁奈尔大学的研究人员发现,在早晨进行锻炼的运动员更容易感染'
]
var oYue = document.getElementById('yueFen');
var oFen = oYue.getElementsByTagName('li');
var oHua =document.getElementById('jiHua');
for (var i = 0; i < oFen.length; i++) {
oFen[i].index=i;
oFen[i].onmouseover = function () {
for (var i = 0; i < oFen.length; i++) {
oFen[i].className = '';
}
this.className = 'active';
oHua.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+oDate[this.index]+'</p>';
} //此处利用innerHTML来替换变化的内容,主要是利用数组的遍历这一功能
}
}
</script>
</head>
<body>
<div id="content">
<div id="yueFen">
<ul>
<li class="active"><p>1</p>JAN</li>
<li><p>2</p>FER</li>
<li><p>3</p>MAR</li>
<li><p>4</p>APR</li>
<li><p>5</p>MAY</li>
<li><p>6</p>JUN</li>
<li><p>7</p>JUL</li>
<li><p>8</p>AUG</li>
<li><p>9</p>SEP</li>
<li><p>10</p>OCT</li>
<li><p>11</p>NOV</li>
<li><p>12</p>DEC</li>
</ul>
</div>
<div id="jiHua">
<h2>1月</h2>
<p>我们该干点什么。。。。。。。</p>
</div>
</div>
</body>
</html>