js製作簡易年曆完整實例_javascript技巧

本文實例講述了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程式設計有幫助。