JS简易日历

最新推荐文章于 2021-01-23 11:09:08 发布

格林黄

最新推荐文章于 2021-01-23 11:09:08 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： web+css+JavaScript小实践

本文链接：https://blog.youkuaiyun.com/apity123/article/details/72933866

web+css+JavaScript小实践专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	#divHead
	{
	width:790px;
	height:430px;
	text-align:center;
	background-color:#000000;
	color:#FFFFFF;
	}
	#divHead ul li
	{
	margin:2px 2px;
	display:block;
	width:220px;
	height:100px;
	float:left;
	border:2px solid white;
	}
	#bottom
	{
	margin:0px 0px 0px 0px;
	width:790px;
	height:180px;
	border:0px solid white;
	background-color:#000000;
	color:white;
	text-align:center;}
	.active
	{
	
	color:red;
	}
</style>
<script>
window.onload=function()
{
	var oDiv=document.getElementById("divHead");
	var liCh=oDiv.getElementsByTagName("li");
	var innerDiv=document.getElementById("bottom");
	var arr=["1月,让自己取得好成绩","2月,保持良好的情绪","3月,开心每一天","4月,活力起来","5月,加油","6月,倘不奋发，惟有失败，顾影自怜","7月,以情恕人，以理律已","8月,happiness","9月,科学和艺术是一枚硬币的两面","10月,漂亮","11月,拼搏的汗水放射着事业的光芒，奋斗的年华里洋溢着人生的欢乐。 ","12月书籍是朋友，虽然没有热情，但是非常忠实,"]
	for(var i=0;i<liCh.length;i++)
	{
		liCh[i].index=i;
		liCh[i].onmouseover=function()
		{
			for(var j=0;j<liCh.length;j++)
			{
				liCh[j].className="";
			}
			this.className="active";
			innerDiv.innerHTML="<h2>"+(this.index+1)+"月活动</h2>"+arr[(this.index)];
		}
	}
}
</script>
</head>

<body>
	<div id="divHead">
		<ul>
			<li class="active"><h2>1</h2>January</li>
			<li><h2>2</h2>February</li>
			<li><h2>3</h2>March</li>
			<li><h2>4</h2>April</li>
			<li><h2>5</h2>May</li>
			<li><h2>6</h2>June</li>
			<li><h2>7</h2>July</li>
			<li><h2>8</h2>August</li>
			<li><h2>9</h2>September</li>
			<li><h2>10</h2>October</li>
			<li><h2>11</h2>November</li>
			<li><h2>12</h2>December</li>
		</ul>
	</div>
	<div id="bottom">
			
	</div>
</body>
</html>