练习地址:http://www.fgm.cc/learn/lesson2/08.html
实现思路跟这篇差不多。也想过吧展示的节日信息放到js里面更换,但是考虑到这算是内容部分,还是放在HTML较好,反正都是要打一遍的。
代码如下:
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>简易JS年历</title>
<link rel="stylesheet" type="text/css" href="8_calendar.css">
</head>
<body>
<div id="container">
<div class="month">
<div><strong>1</strong><br>JAN</div>
<div><strong>2</strong><br>FEB</div>
<div><strong>3</strong><br>MAR</div>
<div><strong>4</strong><br>APR</div>
<div><strong>5</strong><br>MAY</div>
<div id="active1"><strong>6</strong><br>JUN</div>
<div><strong>7</strong><br>JUL</div>
<div><strong>8</strong><br>AUG</div>
<div><strong>9</strong><br>SEP</div>
<div><strong>10</strong><br>OCT</div>
<div><strong>11</strong><br>NOV</div>
<div><strong>12</strong><br>DEC</div>
</div>
<div class="infor">
<p><strong>1月节日</strong><br>元旦:1月1日至3日放假三天。</p>
<p><strong>2月节日</strong><br>春节:2月2日至8日放假7天。</p>
<p><strong>3月节日</strong><br>妇女节:3月8日妇女节,与我有关。</p>
<p><strong>4月节日</strong><br>清明节:4月3日至5日放假3天。</p>
<p><strong>5月节日</strong><br>劳动节:4月30日至2日放假3天。</p>
<p id="active2"><strong>6月节日</strong><br>端午节:6月4日至6日放假3天。</p>
<p><strong>7月节日</strong><br>小暑:7月7日小暑,不放假。</p>
<p><strong>8月节日</strong><br>七夕节:8月6日七夕节,不放假。</p>
<p><strong>9月节日</strong><br>中秋节:9月10日至12日放假3天。</p>
<p><strong>10月节日</strong><br>国庆节:10月1日至7日放假7天。</p>
<p><strong>11月节日</strong><br>立冬:11月8日立冬,不放假。</p>
<p><strong>12月节日</strong><br>艾滋病日:12月1日<br>废除奴隶制国际日:12月2日。</p>
</div>
</div>
<script type="text/javascript" src="8_calendar.js"></script>
</body>
</html>
这里的class和id可能有点乱用,但是是因为产生了优先级的问题,为了覆盖所以采用的。具体可以看上篇。
CSS
#container {
width: 250px;
margin: 0 auto;
background: #DCDCDC;
padding-bottom: 2px;
}
.month {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.month div {
width: 50px;
height: 50px;
background: #363636;
color: white;
padding: 0;
margin: 10px 0 0 10px;
text-align: center;
font-size: 14px;
display: inline-block;
}
strong {
font-size: 18px;
line-height: 26px;
}
#active1 {
/*如果不改变宽高,鼠标hover时会出现抖动情况*/
width: 48px;
height: 48px;
border: 1px solid black;
color: #EE1289;
background: white;
}
.infor {
width: 210px;
margin: 10px auto;
border: 1px solid white;
padding: 10px;
background: #EEEEE0;
}
.infor p {
margin: 0;
opacity: 0.8;
font-size: 14px;
display: none;
line-height: 16px;
}
p strong {
font-size: 14px;
}
#active2 {
display: block;
}
这里需要注意的是我采用了flex布局,在鼠标移入的时候会发生布局抖动的情况,所以我在鼠标移入事件中给它添加的类名里,修改了宽高,让它大小没变,所以抖动消失了。
JavaScript
window.onload = function() {
var month = document.getElementsByClassName("month")[0].children;
var infor = document.getElementsByClassName("infor")[0].children;
for(var i=0; i<month.length; i++){
month[i].index = i;
month[i].onmouseover = function() {
for(var j=0; j<month.length; j++){
month[j].removeAttribute("id","active1");
infor[j].style.display = "none";
}
this.setAttribute("id","active1");
infor[this.index].style.display = "block";
}
}
}
这里有的疑问跟上篇一样,希望能得到指点。