简易日历（innerHTML和行间提取事件的练习）

最新推荐文章于 2024-08-13 08:49:13 发布

zhengxue_er

最新推荐文章于 2024-08-13 08:49:13 发布

阅读量483

点赞数 1

分类专栏：前端文章标签：日历索引 javascript

本文链接：https://blog.csdn.net/qq_38177305/article/details/78529091

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

简易日历，鼠标移入月份实现当前月份style改变，对应文字改变显示.
这里写图片描述

总结几个小点：
1.每个月份对应的文字用数组来装，（数据量大，用div的显示和隐藏不现实）；
2.用循环的方式为每个月份添加onmouseover事件；
3.用js的方式给月份添加索引，利于对应月的文字选择（若用html自定义属性添加会被FF过滤掉）；
4.innerHTML不仅可以读写文本内容，还可以改变HTML内容（包括标签）。

简单代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS简易日历</title>
		<style>
			#calendar{width:300px;
			          height:auto;
			          background:#ccc}
			.active{background:burlywood;}
			ul{margin: 0  auto;}
			ul li{display: inline-block;
			      list-style:none;
			      border:1px solid #CCC;
			      width:50px;
			      height:50px;
			      background:salmon;
			      color:white;
			      text-align: center;}
			#text{margin-left:15%}
		</style>
		<script>
			window.onload = function(){
				
			var arr=['正月梅花香又香',
				         '二月兰花盆中装',
				         '三月桃化红十里',
				         '四月蔷薇靠短墙',
				         '五月石榴红似火',
				         '六月荷花满池塘',
				         '七月栀子头上戴  ',
				         '八月桂花满树黄',
				         '九月菊花初开放',
				         '十月芙蓉正上妆',
				         '十一月水仙供上案',
				         '十二月腊梅雪中香'];
				         
var calendar = document.getElementById('calendar');
var moon = calendar.getElementsByTagName('li');
var text = calendar.getElementsByTagName('div')[0];
				
for(var i = 0;i < moon.length; i++)
{
	moon[i].index = i;
	moon[i].onmouseover = function()
	{
	  for(var i= 0;i<moon.length;i++)
	 {
		moon[i].className = '';
	}
	this.className = 'active'; 
	text.innerHTML = '<h4>'+(this.index+1)+'月</h4><p>'+arr[this.index]+'</p>'
		}
	}
};
</script>
	</head>
	<body>
		<div id="calendar">
			<ul id="ul">
				<li class="active">Jan</li>
				<li>Feb</li>
				<li>Mar</li><br />
				<li>Apr</li>
				<li>May</li>
				<li>Jun</li><br />
				<li>Jul</li>
				<li>Aug</li>
				<li>Sep</li><br />
				<li>Oct</li>
				<li>Nov</li>
				<li>Dec</li><br />
			</ul>
			<div id="text">
			</div>
		</div>
	</body>
</html>