JS学习笔记：简易日历

最新推荐文章于 2025-08-22 13:39:56 发布

鸣虫

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签：日历 javascript

本文链接：https://blog.youkuaiyun.com/qq_30174719/article/details/52329411

学习笔记专栏收录该内容

3 篇文章

订阅专栏

本教程通过实例演示如何使用HTML和JavaScript实现动态显示不同月份的节气。通过鼠标悬停效果改变列表项样式，并更新对应文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节课学习了：

1、数组arr[1,2,3]；

2、innerHTML；

3、字符串；

<!DOCTYPE Html>
<html lang="zh-cn">
<meta charset="utf8" />
<head>
<style type="text/css">
body{font-size: 14px;font-family: Microsoft Yahei;}
ul,li{list-style: none;float:left;}
h2,p{padding:0;margin:0;}
h2{display:inline-block;}
#tab{width:400px;height:420px;border:1px solid #ddd;padding:10px;}
#tab ul li{background:#545454;color:#fff;width:60px;height:60px;margin:10px;text-align:center;padding-top:5px;}	
#tab ul li p{color:#fff;}
#tab ul li.active{background:orange;}
#tab .text{background:#f6f6f6;padding:5px;border:1px solid #ddd;}
</style>
	<script type="text/javascript">
	window.onload=function(){
		var arr = [
		'小寒，大寒',
		'立春，雨水',
		'惊蛰，春分',
        '清明，谷雨',
        '立夏，小满',
        '芒种，夏至',
        '小暑，大暑',
        '立秋，处暑',
        '白露，秋分',
        '寒露，霜降',
        '立冬，小雪',
        '大雪，冬至'
		];
		var oDiv = document.getElementById('tab');
		var aLi = oDiv.getElementsByTagName('li');
		var oTxt = oDiv.getElementsByTagName('div')[0];

		for (var i = 0; i<aLi.length; i++) {   //选择所有LI
			aLi[i].index=i;
			aLi[i].onmouseover=function(){
				for(var i=0;i<aLi.length;i++){
                  aLi[i].className='';
                 }
                 this.className='active';     //当前LI
                 oTxt.innerHTML='<h2>'+(this.index+1)+'</h2>月节气<p>'+arr[this.index]+'</p>';
			};
		}

	};
</script>
</head>
<body>
	<div id="tab">
		<ul>
			<li class="active">
				<h2>1</h2>
				<p>FEB</p>
			</li>
			<li>
				<h2>2</h2>
				<p>MAR</p>
			</li>
			<li>
				<h2>3</h2>
				<p>APR</p>
			</li>
			<li>
				<h2>4</h2>
				<p>MAY</p>
			</li>
			<li>
				<h2>5</h2>
				<p>JUN</p>
			</li>
			<li>
				<h2>6</h2>
				<p>JUL</p>
			</li>
			<li>
				<h2>7</h2>
				<p>AUG</p>
			</li>
			<li>
				<h2>8</h2>
				<p>SET</p>
			</li>
			<li>
				<h2>9</h2>
				<p>OCG</p>
			</li>
			<li>
				<h2>10</h2>
				<p>NOV</p>
			</li>
			<li>
				<h2>11</h2>
				<p>DEC</p>
			</li>
			<li>
				<h2>12</h2>
				<p>JAN</p>
			</li>
		</ul>
		<div class="text">
			<h2>1月</h2>
			<p>TEST</p>
		</div>
	</div>

</body>
</html>