js简单月历

最新推荐文章于 2022-11-04 14:54:23 发布

原创最新推荐文章于 2022-11-04 14:54:23 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文主要介绍了如何使用JavaScript创建一个简单的月历，重点探讨了数组遍历和索引应用的方法，结合HTML和CSS完成月历的展示。

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

重点：涉及index的用法和数组遍历

HTML

<div class="f-wrap">
	<div class="m-yearCalendar">
		<ul id="tabNav" class="clearfix">
			<li><h2>1</h2><p>JAN</p></li>
			<li><h2>2</h2><p>FER</p></li>
			<li><h2>3</h2><p>MAR</p></li>
			<li><h2>4</h2><p>APR</p></li>
			<li><h2>5</h2><p>MAY</p></li>
			<li><h2>6</h2><p>JUN</p></li>
			<li><h2>7</h2><p>JUL</p></li>
			<li><h2>8</h2><p>SUG</p></li>
			<li><h2>9</h2><p>SEP</p></li>
			<li><h2>10</h2><p>OCT</p></li>
			<li><h2>11</h2><p>NOV</p></li>
			<li><h2>12</h2><p>DEC</p></li>
		</ul>
		<div id="tabText"></div>
	</div>
</div>

css

<style type="text/css" media="screen">
	*{margin:0; padding: 0;}  
	body{font-family: "microsoft yahei";}
    .clearfix:before, .clearfix:after{content: ""; display:table;}  
    .clearfix:after{clear:both; overflow: hidden;}  
    .clearfix{zoom:1;}  
    .f-wrap{width: 450px; margin:50px auto; text-align: left;} 

    .m-yearCalendar{padding:15px; background-color:#f0f0f0; border:1px solid #ccc; width:290px;}
    #tabNav{ margin-right: -10px;}
    #tabNav li{float:left; display: inline; margin:0 10px 10px 0; width:88px; height:88px; text-align: center; background-color:#333; color:#fff; border:1px solid #333;}
    #tabNav li.active{ background-color:#fff; color:green;}
    #tabNav li h2{line-height:45px; font-size:40px; padding:10px 0 0; font-weight: normal;}
    #tabNav li p{ line-height: 30px; font-size:16px;}
    #tabText{ background-color:#f0f0f0; padding: 10px; line-height: 24px; border:1px solid #fff;}
    #tabText h2{ line-height:24px; color:#666; font-size:18px; padding:4px 0 10px;}
    #tabText p{ line-height: 24px; color:#666;}
</style>

javascript

<script>
	window.onload = function(){
		var aLi = document.getElementById('tabNav').getElementsByTagName('li');
		var oTxt = document.getElementById('tabText');
		var i = 0;
		var aDatas = [
			'一月那些事儿...',
			'二月那些事儿...',
			'三月那些事儿...',
			'四月那些事儿...',
			'五月那些事儿...',
			'六月那些事儿...',
			'七月那些事儿...',
			'八月那些事儿...',
			'九月那些事儿...',
			'十月那些事儿...',
			'十一月那些事儿...',
			'十二月那些事儿...'
		]
		for(i=0; i<aLi.length; i++){
			aLi[i].index = i;
			aLi[i].onmouseover = function(){
				for(i=0; i<aLi.length; i++){
					aLi[i].className = '';
				}
				this.className = 'active';
				oTxt.innerHTML = '<h2>' + (this.index +1 ) + '月活动</h2><p>' + aDatas[this.index] + '</p>'
			}
		}

	}
</script>