1、問題：如何實現如圖1和圖2所示的內容動態改變的特效？當用瀏覽器打開示例 1所示文件時，一開始就出現如圖1所示的頁面效果，即顯示id名為DIV2的層。 當用戶使用鼠標選中“根據面積、單價計算”單選按鈕時，id名為DIV2的層隨 即消失，同時id名為DIV1的層顯示，如圖2所示；當用戶選中“根據貸款總額 計算”單選按鈕時，又返回到剛開始運行時的頁面效果，如圖1所示.用戶可以 通過反復選中“根據面積、單價計算”和“根據貸款總額計算”單選按鈕，來反 復地使id名為DIVI的層和id名為DIV2的層切換顯示和隱藏.那么如何制作根 據選擇不同的計算方式，內容動態改變的特效？圖1顯示id名為DIV2的層的效

2、果圖2顯示id名為DIV1的層的效果分析：根據前面學過的知識，有哪些方法可以實現動態改變頁面內容？其實，有 兩種方法。第一種方法：在上一節中學過的，通過改變DIV的innerHTML屬性值動態改變頁 而內容。這種情況適合動態顯示的內容較少時，動態顯示的內容（如“用戶名” 不能為空）占據一行的時候比較適合此種方法，使用myDiv.innerHTML=HTML 代碼來動態改變頁面內容。第二種方法：當動態顯示的內容較多，并相對固定時，則應該預先制作好DIV 內容如圖1所示id名為DIVI的層中的內容有兩行或兩行以上內容時），然后使 用myDiv.style.display=none/block”，來

3、動態改變層的隱藏或顯示，從而實 現動態改變頁而內容。WANGYEXX.COM具體的制作過程如下。第一步：制作靜態頁而，插入一個名為myform的表單，然后在表單域中插入8 行3列表格，合并相應的單元格，如圖1所示。接著插入圖片和文本，并設置各 表單元素的名稱。“貸款類別”下拉列表框只有兩個選項：公積金和商業貸款， 值分別為g和s。在“根據面積、單價計算”和“根據貸款總額計算”文本前分 別捅入一個單選按鈕?！斑€款期限”下拉列表框的選項為5年、10年、15年、20年、25年、30年，值分別是5、10、15、20、25、30。其他頁面元素的設置 如圖1所示。第二步：在如圖1所示的文本“根據而積、單價

4、計算”和“根據貸款總額計算” 后分別插入兩個DIV標簽，并設置id名分別為DIVI和DIV2 (沒有樣式的DIV 層)，然后在這兩個DIV層中分別放置不同計算方式顯示的內容，如圖3所示。圖3插入兩個DIV層的界面效果第三步：編寫一個用于初始化id名為DIV1的層不顯示的函數InitDIV()，該函 數剛來初始化時隱藏id名為DIVI的層，并且它是在頁而加載時閂動調用的，代 碼如下。function InitDIV()(document.getElementById(DIV1).style.display=none”; 第四步：編寫函數displayDIV()，根據“計算方式”的選擇，隱藏/顯示

5、對應DIV 層。即若選中“根據面積、單價計算”單選按鈕，就隱藏id名為DIV2的層，顯 示id名為DIV1的層；同理，若選中“根據貸款總額計算”，對應DIV層的顯示 /隱藏正好相反。function displayDIV()3. if (document.myform.methodRadio0.checked=true)document.getElementById(DIV1).style.display=block;顯示id名為DIV1的層document.getElementById(DIV2).style.display=none” ；else(document.getElementBy

6、Id(DIV2”).style.display=block ;顯示id名為DIV2的層document.getElementById(DIV1”).style.display=none” 在上述代碼片斷中，document.myform.methodRadio0.checked二true 表示是否 選中了第一個單選按鈕。上述制作過程所對應的關鍵代碼如示例1所示。示例1:SCRIPT language二JavaScriptfunction InitDIV() TOC o 1-5 h z (/初始化時，隱藏id名為DIV1的層document.getElementById(DIV1”).style

7、.display=none”;8.function displayDIV( )(/判斷是否選中了第一個單選按鈕if (document.myform.methodRadio0.checked二二true)(document.getElementById(DIV1).style.display=block ;顯示id名為DIV1的層document.getElementById(DIV2”).style.display=none” ;else(document.getElementById(DIV2”).style.display=block ;顯示id名為DIV2的層document.getElementById(DIV1).style.display=none” ；26.29.根據面積、單價計算 單價：INPUT