本文实例讲述了js制作简易年历的方法。分享给大家供大家参考。具体如下：
今天学习了一下用js来实现年历的制作，顺便复习了一下this的用法，跟选项卡的制作有点差别，新用到了innerHTML，希望自己坚持下去，各位js大神也多多指点。
innerHtml的用法
现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。
例如top.innerHTML="";就可以在top对应的位置出现一个button了！
程序实现思路：
1. 类似选项卡，只是底部有一个div；
2. innerHTML的使用
3.数组的使用
① 定义：arr[0,1,2,3]
② 使用：arr[0]
4.字符串连接
① 作用：连接两个字符串 “+”
② 问题：连接中的优先级 用（）解决
实现源码：
Javascript：
复制代码 代码如下:
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; }
HTML：
复制代码 代码如下:
- 1
一月
- 2
二月
- 3
三月
- 4
四月
- 5
五月
- 6
六月
- 7
七月
- 8
八月
- 9
九月
- 10
十月
- 11
十一月
- 12
十二月
效果图如下：
希望本文所述对大家的javascript程序设计有所帮助。
