JS實現 簡易日曆

2021-10-01 16:31:21 字數 1946 閱讀 9674

1.選項卡的實現

2.匿名函式

無名字的函式

屬性id.function(){}

3.html檔案載入問題

在寫js的**,如果js**中需要先載入html檔案之後才能獲取到值得話,必須把js**寫在指定標籤獲取值得後面.否則報錯或無法執行.由於js**嵌入在html標籤中,導致閱讀性差,以及一些其他問題,因此可以使用window.onload來優先載入html檔案.

4.樣式優先順序

標籤<

!doctype html public

"-//w3c//dtd xhtml 1.0 transitional//en"

"">

"">

"content-type" content=

"text/html; charset=utf-8"

/>

簡易日曆實現版本<

/title>

*#tab

.calender

div li

.active

.text

.text h3

.text p

<

/style>

window.

onload

=function()

//5.新增樣式

this

.classname=

'active'

;//獲取到標籤寫入對應的值

otxt.innerhtml=

''+arr[

this

.index]+'

';}}

}<

/script>

<

/head>

"tab"

class

="calendar"

>

="active"

>

1<

/h2>

jan<

/p>

<

/li>

2<

/h2>

fer<

/p>

<

/li>

3<

/h2>

map<

/p>

<

/li>

4<

/h2>

apr<

/p>

<

/li>

5<

/h2>

may<

/p>

<

/li>

6<

/h2>

jun<

/p>

<

/li>

7<

/h2>

jul<

/p>

<

/li>

8<

/h2>

aug<

/p>

<

/li>

9<

/h2>

sep<

/p>

<

/li>

10<

/h2>

oct<

/p>

<

/li>

11<

/h2>

nov<

/p>

<

/li>

12<

/h2>

dec<

/p>

<

/li>

<

/ul>

>

='txt'

>

>

1月活動<

/h2>

快過年了,大家可以商量著去哪兒玩吧<

/p>

<

/div>

<

/div>

<

/body>

<

/html>學習的內容總結哦!

js簡易日曆

該功能最終實現的結果如下圖所示 程式實現思路 1 使用for,實現滑鼠懸浮中英文切換 2 底部文字切換,使用tab選項卡思路,動態陣列獲取文字 3 底部文字的切換使用innerhtml 注意以下幾點 1 頁面布局,注意active狀態是在li上新增,jan fer2 字串的拼接 例如 abg 12 ...

js簡易日曆

js簡易日曆中設計的知識點 選項卡切換 陣列 innerhtml 連線符 與選項卡的區別 div的個數不同 連線符中需要注意的 優先順序 abc 12 3 def 結果 abc123def abc 12 3 def 結果 abc15def html body div class contain ul...

js簡易日曆innerHtml

注意事項 思路同選項卡差不多,1 對於最下面文字的更改,可以使用陣列,把他們的內容都放到乙個陣列中,然後使用字串的拼接來實現 2 innerhtml是用來設定標籤內的文字,而value是用來設定input中的文字值 3 對於字串連線,為了不使數字和字母連在一起,可以使用括號括起來。即同數學中的加法的...