js实现年历

JS实现动态节日提示

最新推荐文章于 2024-07-17 10:20:02 发布

因火成烟

最新推荐文章于 2024-07-17 10:20:02 发布

阅读量895

点赞数

CC 4.0 BY-SA版权

文章标签： css js web前端数组索引年历

本文链接：https://blog.youkuaiyun.com/TheFoma/article/details/45117455

实现思路：

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>