学习js简易年历的制作

今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点。

innerHtml的用法

现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。

例如top.innerHTML="";就可以在top对应的位置出现一个button了!

 

程序实现思路--

**类似选项卡,只是底部有一个div;

**innerHTML的使用

 

数组的使用--

**定义:arr[0,1,2,3]

**使用:arr[0]

 

字符串连接--

**作用:连接两个字符串   “+”

**问题:连接中的优先级 用()解决

实现源码--​

JavaScript​

<script type="text/javascript">
	window.οnlοad=function()
	{
	    var arr=[
		         '快过年了,大家一起去放鞭炮咯!',
		          '马上上学了,不开心!',
				   '妇女节快乐!',
				   '很平淡的四月',
				   '劳动光荣!',
				   '儿童节快乐!',
				   '好热的七月!',
				   '八一建军节!',
				   '又开学了哎!'
		];
		var oDiv=document.getElementById('tab');
		var oLi=oDiv.getElementsByTagName('li');
		var oTxt=oDiv.getElementsByTagName('div')[0];
		var i=0;
	    for(var i=0;i<oLi.length;i++)
		{
		    oLi[i].index=i;
			oLi[i].οnmοuseοver=function ()
			{
				 for(var i=0;i<oLi.length;i++)
				 {
				 
				 	oLi[i].className='';
				 
				 }
			
				this.className='active';
				oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
			};
		
		}
	
	};
</script></span>

CSS

<span style="font-size:18px;"><style type="text/css">
* { padding: 0;margin: 0; }

li { list-style: none; }

body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px;
            margin: 50px auto 0; 
			padding: 10px 10px 20px 20px; 
			background: #eae9e9; }
			
.calendar ul { width: 210px; 
               overflow: hidden; 
			   padding-bottom: 10px; }
			   
.calendar li { float: left;
               width: 58px; 
			   height: 54px; 
			   margin: 10px 10px 0 0; 
			   border: 1px solid #fff; 
			   background: #424242;
			   color: #fff; 
			   text-align: center; 
			   cursor: pointer; }
			   
.calendar li h2 { font-size: 20px; padding-top: 5px; }

.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242;
                    background: #fff;
				    color: #e84a7e; }
					
.calendar .active h2 { }

.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; 
                  padding: 0 10px 10px;
				  border: 1px solid #fff; 
				  padding-top: 10px; 
				  background: #f1f1f1; 
				  color: #555; }
				  
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }

.calendar .text p { font-size: 12px; line-height: 18px; }
</style></span>

HTML

<span style="font-size:18px;"><body>
<div id="tab" class="calendar">
	<ul>
		<li class="active"><h2>1</h2><p>一月</p></li>
	    <li><h2>2</h2><p>二月</p></li>
		<li><h2>3</h2><p>三月</p></li>
		<li><h2>4</h2><p>四月</p></li>
	    <li><h2>5</h2><p>五月</p></li>
		<li><h2>6</h2><p>六月</p></li>
		<li><h2>7</h2><p>七月</p></li>
		<li><h2>8</h2><p>八月</p></li>
		<li><h2>9</h2><p>九月</p></li>
		<li><h2>10</h2><p>十月</p></li>
		<li><h2>11</h2><p>十一月</p></li>
		<li><h2>12</h2><p>十二月</p></li>
	</ul>
	<div class="text">
	</div>
		
</div>
</body></span>

效果图





  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //创建一个数组,用于存放每个月的天数 function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)  { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } //实现月历 function calendar() { var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); year = today.getYear() +1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")  document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>") document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>"); document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>"); var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var now = new Date(); document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>"); document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>"); document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>"); document.writeln("</TR><TR>"); column = 0; for (i=0; i<startDay; i++) { document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>"); column++; } for (i=1; i<=nDays; i++) { if (i == thisDay) { document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>") } else { document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>"); } document.writeln(i); if (i == thisDay) document.writeln("</FONT></TD>") column++; if (column == 7) { document.writeln("<TR>");  column = 0; } } document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>") document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>") document.writeln(" 现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>") document.writeln("</TD></TR></TABLE></div>"); } </SCRIPT>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值