【fgm.cc练习2-8】简易JS年历

最新推荐文章于 2019-12-14 17:59:42 发布

denguing

最新推荐文章于 2019-12-14 17:59:42 发布

阅读量186

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript

本文链接：https://blog.csdn.net/DGT4720/article/details/103055385

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

练习地址：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";
		}
	}
}

这里有的疑问跟上篇一样，希望能得到指点。

denguing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【fgm.cc练习2-8】简易JS年历

练习地址：http://www.fgm.cc/learn/lesson2/08.html实现思路跟这篇差不多。也想过吧展示的节日信息放到js里面更换，但是考虑到这算是内容部分，还是放在HTML较好，反正都是要打一遍的。代码如下：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="...
复制链接

扫一扫

专栏目录