本文實例講述了js製作簡易年曆的方法。分享給大家供大家參考。具體如下：
今天學習了一下用js來實現年曆的製作，順便複習了一下this的用法，跟選項卡的製作有點差別，新用到了innerHTML，希望自己堅持下去，各位js大神也多多指點。
innerHtml的用法
現在用top.innerHTML="..........";的方法就可以寫入HTML程式碼到這個id的位置了。
例如top.innerHTML="";就可以在top對應的位置出現一個button了！
程式實作思路：
1. 類似選項卡，只是底部有一個div；
2. innerHTML的使用
3.陣列的使用
① 定義：arr[0,1,2,3]
② 使用：arr[0]
4.字串連接
① 作用：連接兩個字串 “ ”
② 問題：連線中的優先權 用（）解
實作原始碼：
JavaScript：
CSS：
* { 填滿：0；邊距：0； }
li { 列表樣式：無； }
正文{背景：#f6f9fc;字型系列：arial； }
.日曆{寬度：210px;
邊距：50px 自動 0；
內邊距：10 像素 10 像素 20 像素 20 像素；
背景：#eae9e9； }
.calendar ul { 寬度：210px;
溢出：隱藏；
底填充：10px； }
.calendar li { float: 左;
寬度：58px；
高度：54 像素；
邊距：10px 10px 0 0；
邊框：1px實線#fff；
背景：#424242；
顏色：#fff；
保持對齊文字：中位；
遊標：指標； }
.calendar li h2 { 字體大小：20px;頂部填充：5px； }
.calendar li p { 字體大小：14px; }
.calendar .active { 邊框：1px 實心#424242;
背景：#fff；
顏色：#e84a7e; }
.calendar .active h2 { }
.calendar .active p { 字體粗細：粗體； }
.日曆.text { 寬度：178px;
內邊距：0 10px 10px；
邊框：1px實線#fff；
上方填入：10px；
背景：#f1f1f1；
顏色：#555； }
.calendar .text h2 {字體大小：14px;底部邊距：10px； }
.calendar .text p { 字體大小：12px;行高：18px； }
風格>
HTML：
-
1
一月
-
2
二月
-
3
三月
-
4
四月
-
5
五月
-
6
六月
-
7
七月
-
8
八月
-
9
九月
-
10
十月
-
11
十一月
-
12
十二月
身體>
效果圖如下：
希望本文對大家介紹的javascript程式設計有幫助。
