JavaScript控制頁面顯示和隱藏帶案例
阿新 • • 發佈：2019-02-05
控制頁面元素的顯示和隱藏
style.visibility = visible/hidden
元素隱藏後，元素所佔的空間還會留著。
style.display= block/none
元素和元素所佔的空間都會被隱藏
一個綜合案例
月收入（只能輸入數字，正則表示式判斷數字）
男性花銷
女性花銷
化妝品費用
style.visibility = visible/hidden
元素隱藏後，元素所佔的空間還會留著。
style.display= block/none
元素和元素所佔的空間都會被隱藏
一個綜合案例
月收入（只能輸入數字，正則表示式判斷數字）
男性花銷
抽菸費用
喝酒費用女性花銷
化妝品費用
買衣服費用
總費用
並且在男的時候 女性花銷隱藏 點選女的時候 男性花銷隱藏
首先我們需要知道 body 的 onload事件 頁面載入的時候執行 onclick 被點選的時候執行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="2.js"></script> </head> <body onload="showMale();"> <table width="335" height="271" border="1"> <tr> <th colspan="2" scope="col">使用者生活費用統計表單</th> </tr> <tr> <td colspan="2"><input name="xb" type="radio" id="nan" value="male" onclick="showMale();" /> 男 <input type="radio" name="xb" id="nv" value="female" onclick="showFemale();"/> 女</td> </tr> <tr name="nanhx"> <td width="131">抽菸費用</td> <td width="188"><input type="text" name="cyfy" id="cyfy" /></td> </tr> <tr name="nanhx"> <td>喝酒費用</td> <td><input type="text" name="hjfy" id="hjfy" /></td> </tr> <tr name="nvhx"> <td>化妝品費用</td> <td><input type="text" name="hzpfy" id="hzpfy" /></td> </tr> <tr name="nvhx"> <td>買衣服費用</td> <td><input type="text" name="myffy" id="myffy" /></td> </tr> <tr> <td colspan="2"><input type="submit" name="button" id="button" value="提交" onclick="showzfy();"/> 總費用 <input type="text" name="zfy" id="zfy" /><div id="info"></div></td> </tr> </table> </body> </html>
// JavaScript Document function showMale() { document.getElementById("nan").checked=true; document.getElementById("nv").checked=false; // 顯示男性消費資訊 for(var i=0; i<document.getElementsByName("nanhx").length;i++) { //document.getElementsByName("nanhx").item(i).style.visibility ="visible"; document.getElementsByName("nanhx").item(i).style.display="table-row"; } // 隱藏女性消費資訊 for(var i=0; i<document.getElementsByName("nvhx").length;i++) { //document.getElementsByName("nvhx").item(i).style.visibility ="hidden"; document.getElementsByName("nvhx").item(i).style.display="none"; } } function showFemale() { document.getElementById("nan").checked=false; document.getElementById("nv").checked=true; // 隱藏男性消費資訊 for(var i=0; i<document.getElementsByName("nanhx").length;i++) { document.getElementsByName("nanhx").item(i).style.display="none"; } // 顯示女性消費資訊 for(var i=0; i<document.getElementsByName("nvhx").length;i++) { document.getElementsByName("nvhx").item(i).style.display="table-row"; } } function showzfy() { var nan=true; if(document.getElementById("nv").checked) { nan=false; } if(nan) { var str=/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; var flag=str.test(document.getElementById("cyfy").value); if(!flag) { document.getElementById("info").innerHTML="請輸入抽菸費用!"; document.getElementById("cyfy").select(); return; } flag=str.test(document.getElementById("hjfy").value); if(!flag) { document.getElementById("info").innerHTML="請輸入喝酒費用!"; document.getElementById("hjfy").select(); return; } document.getElementById("zfy").value = parseFloat(document.getElementById("cyfy").value)+ parseFloat(document.getElementById("hjfy").value); } else { var str=/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; var flag=str.test(document.getElementById("hzpfy").value); if(!flag) { document.getElementById("info").innerHTML="請輸入化妝品費用!"; document.getElementById("hzpfy").select(); return; } flag=str.test(document.getElementById("myffy").value); if(!flag) { document.getElementById("info").innerHTML="請輸入買衣服費用!"; document.getElementById("myffy").select(); return; } document.getElementById("zfy").value = parseFloat(document.getElementById("hzpfy").value)+ parseFloat(document.getElementById("myffy").value); } }
