在之前的 JavaScript 簡介中，對於JavaScript 應該有一個大致的了解了，那么接下來，我們來看看 JavaScript 在網頁中的控制行為是怎樣一回事！！
1. 關於點擊調整字體（Font）的一些屬性：
效果圖：
實現代碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新聞廣告</title> <style type="text/css"> <!-- 偽元素選擇器 --> a:link,a:visited { color:#FF9900; text-decoration:none; font-size:15px; } a:hover { color:#0099FF; } .middle { border:#0099FF 1px solid; font-size:16px; width:400px; } /* 預先定一些選擇器 */ .max { border:#0099FF 1px solid; font-size:20px; color:#FF0000; background-color:#CCFFFF; width:400px; } .min { border:#0099FF 1px solid; font-size:12px; color:#0000FF; background-color:#FFFFFF; width:400px; } </style> <script type="text/javascript"> function resize(size){ //獲取div var oDiv = document.getElementById("newstext"); //把參數賦值給div的class屬性 oDiv.className = size; } </script> </head> <body> <h2>這是一個大新聞.</h2> <a href="javascript:void(0)" onclick="resize('min')">小字體</a> <a href="javascript:void(0)" onclick="resize('middle')">中字體</a> <a href="javascript:void(0)" onclick="resize('max')">大字體</a> <hr /> <div id="newstext" class="middle"> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> 演示接口.很多內容.怎么辦呢?等等<br /> </div> </body> </html>
2. 關於 Checkbox 的一些應用：
效果圖：
實現代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全選反選問題</title> <script> function checkAll(obj){ //讓所有item的狀態和全選保持一致 var items = document.getElementsByName("item"); for(var i=0; i<items.length; i++){ items[i].checked = obj.checked; } } window.onload = function(){ //當頁面加載完成后獲取所有的item //獲取所有的item, 給每一個item添加點擊事件: 判斷所有的item是否被選中, 如果是, 全選應該被選中, 如果不是, 全選應該取消! var items = document.getElementsByName("item"); for(var i=0; i<items.length; i++){ items[i].onclick = function(){ var flag = true; for(var j=0; j<items.length; j++){ if(!items[j].checked){ flag = false; break; } } document.getElementById("all1").checked = flag; /*if(flag){ document.getElementById("all1").checked = true; }else{ document.getElementById("all1").checked = false; }*/ } } } function check(){ //獲取所有的item, 將每一個item的狀態取反. var items = document.getElementsByName("item"); for(var i=0; i<items.length; i++){ items[i].checked = !items[i].checked; } //============================== //判斷所有的item是否被選中, 如果是, 全選應該被選中, 如果不是, 全選應該取消! var flag = true; for(var j=0; j<items.length; j++){ if(!items[j].checked){ flag = false; break; } } document.getElementById("all1").checked = flag; } function getSum(){ //獲取所有的item, 循環遍歷, 依次判斷每一個item是否被選中, 如果是累加value var items = document.getElementsByName("item"); var sum = 0; for(var i=0; i<items.length;i++){ if(items[i].checked){ sum += parseFloat(items[i].value); } } document.getElementById("sumId").innerHTML = "總金額為: "+sum; } </script> </head> <body> <div>商品列表</div> <input type="checkbox" name="item" value="3000" />筆記本3000元<br /> <input type="checkbox" name="item" value="2500"/>HTC手機2500<br /> <input type="checkbox" name="item" value="8000" />蘋果電腦8000<br /> <input type="checkbox" name="item" value="1500" />IPAD1500<br /> <input type="checkbox" name="item" value="400" />玩具汽車400<br /> <input type="checkbox" id="all1" name="all" onclick="checkAll(this)"/>全選<br /> <input type="checkbox" id="all2" name="all" onclick="check()"/>反選<br /> <input type="button" value="總金額" onclick="getSum()" /><span id="sumId"></span> </body> </html>
3.關於 Radiobutton 的一些使用：
效果圖：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>單選按鈕</title> <style type="text/css"> #all div{ display:none; } </style> <script type="text/javaScript"> function show(obj){ var oDiv = document.getElementById("result"+obj.value); var aDiv = document.getElementById("all").getElementsByTagName("div"); for(var i=0; i<aDiv.length; i++){ aDiv[i].style.display = "none"; } oDiv.style.display = "block"; } </script> </head> <body> <div> <h3>測試你的性格:</h3> <div>請選擇下列一種水果:</div> <input type="radio" name="fruit" value="1" onclick="show(this)" />蘋果<br /> <input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br /> <input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br /> <input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br /> <div id="all"> <div id="result1"> 您的性格,很羞澀. </div> <div id="result2"> 您的性格,很開朗. </div> <div id="result3"> 您的性格,很內向. </div> <div id="result4"> 您的性格,很醇香. </div> </div> </div> </body> </html>
4. 關於 creatTable 的一些使用：
效果圖：
實現代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>創建表格</title> <!-- 定義一些樣式,將來給表格用 --> <style type="text/css"> table{ border:#0099FF 1px solid; width:600px; border-collapse:collapse; } table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; } </style> <script type="text/javascript"> //創建單行單列的表格 function createTable(){ //創建表格元素 var table = document.createElement("table"); //創建表格行元素 var tr = document.createElement("tr"); //創建單元格元素 var td = document.createElement("td"); td.innerHTML = "我是td, 我最牛~!"; //給單元格設置文本 tr.appendChild(td); //將單元格添加到表格行上 table.appendChild(tr); //將表格行添加到表格上 //將創建好的整個table掛載到div上 document.getElementById("tab").appendChild(table); } //創建5行6列的表格 function createTable2(){ //創建table標簽 var table = document.createElement("table"); for(var r = 0;r<5;r++){ //外層循環控制行數 var tr = document.createElement("tr"); //創建table標簽 for(var c = 0;c<6;c++){ //內層循環控制列(單元格)數 var td = document.createElement("td"); td.innerHTML = (r+1)+"行"+(c+1)+"列"; //將td掛載到tr上 tr.appendChild(td) } //將tr掛載到table上 table.appendChild(tr); } //將創建好的整個table掛載到div上 document.getElementById("tab").appendChild(table); } //創建指定行和列的表格 function createTable3(){ //獲取用戶輸入的行數 var row = document.getElementById("row").value; //獲取用戶輸入的列數 var col = document.getElementById("col").value; var table = document.createElement("table"); for(var r = 0;r<row;r++){ var tr = document.createElement("tr"); for(var c = 0;c<col;c++){ var td = document.createElement("td"); td.innerHTML = (r+1)+"行"+(c+1)+"列"; tr.appendChild(td) } table.appendChild(tr); } //將創建好的整個table掛載到div上 document.getElementById("tab").appendChild(table); } </script> </head> <body> <input type="button" value="創建表格" onclick="createTable()" /><br /> <input type="button" value="創建表格(5行6列)" onclick="createTable2()" /><br /> 行數:<input type="text" name="row" id="row"/><br /> 列數:<input type="text" name="col" id="col"/><br /> <input type="button" name="createButton" value="創建表格(行列用戶輸入)" onclick="createTable3()" /> <div id="tab"> </div> </body> </html>
5. 關於 Table 的使用（實現隔行變色）：
效果圖：
實現代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格的操作</title> <style type="text/css"> table { border:#0099FF 1px solid; width:500px; border-collapse:collapse; } table th, table td { border:#0099FF 1px solid; padding:10px 0px 10px 10px; } table th { background-color:#00CCFF; } .one { background-color:#CCFF66; } .two { background-color:#897af1; } .over { background-color:#FF0000; } div{ text-align: center; padding:20px; color:red; } </style> <script type="text/javascript"> window.onload = function(){ alert("效果1: 隔行變色"); //獲取所有的tr var aTr = document.getElementsByTagName("tr"); //循環遍歷 for(var i=1; i<aTr.length; i++){ if(i%2 == 0){//奇(偶)數行,設置為one aTr[i].className = "one"; }else{//偶(奇)數行,設置為one aTr[i].className = "two"; } //------------------------------ var classNameTemp; //光標移入元素時 aTr[i].onmouseover = function(){ classNameTemp = this.className;//記住改變之前的class this.className = "over"; } //光標移出元素時 aTr[i].onmouseout = function(){ this.className = classNameTemp; } } } </script> </head> <body> <table align="center"> <tr> <th>電影名稱</th> <th>電影介紹</th> <th>主演名單</th> </tr> <tr> <td>變形金剛</td> <td>很不錯的電影</td> <td>機器人</td> </tr> <tr> <td>唐伯虎點秋香</td> <td>非常好的電影</td> <td>周星馳,鞏俐</td> </tr> <tr> <td>東邪西毒</td> <td>群星雲集的電影</td> <td>張國榮,梁朝偉...</td> </tr> <tr> <td>少林足球</td> <td>最厲害的足球電影</td> <td>周星馳,趙薇</td> </tr> <tr> <td>賭神</td> <td>小馬哥演繹賭神</td> <td>周潤發</td> </tr> <tr> <td>大話西游</td> <td>超級搞笑的電影</td> <td>周星馳</td> </tr> <tr> <td>瘋狂的石頭</td> <td>一部讓人大笑不止的電影</td> <td>黃渤</td> </tr> </table> <div>(效果2: 試試將鼠標移入到表格行內...)</div> </body> </html>
6. 表格按需要排序：
效果圖：
實現代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格中的數據排序</title> <style type="text/css"> table { border:#0099FF 1px solid; border-collapse:collapse; width:600px; font-family: "微軟雅黑"; margin-top: 50px; } table td{ border:#0099FF 1px solid; text-align:center; } #age:link,#age.visited { color:#000000; } div{ text-align: center; padding:20px; color:red; } </style> <script type="text/javaScript"> function sort(){ //冒泡排序 var aTr = document.getElementsByTagName("tr");//獲取所有的tr //循環遍歷所有的tr(第一行為表頭不算, i和j從1開始) for(var i=1; i<aTr.length-1; i++){ for(var j=1; j<aTr.length-i; j++){ //獲取第j行的年齡 var age1 = parseInt(aTr[j].getElementsByTagName("td")[1].innerHTML); //獲取第j+1行的年齡 var age2 = parseInt(aTr[j+1].getElementsByTagName("td")[1].innerHTML); //比較年齡 if(age1>age2){//升序排序 /*var temp = aTr[j]; aTr[j] = aTr[j+1]; aTr[j+1] = temp;*/ //這種方式是錯的!!! //1.方式一 /* var cloneAtr1 = aTr[j].cloneNode(true); var cloneAtr2 = aTr[j+1].cloneNode(true); aTr[j].parentNode.replaceChild(cloneAtr1 , aTr[j+1]); aTr[j].parentNode.replaceChild(cloneAtr2 , aTr[j]); */ //2.方式二 var temp = aTr[j].innerHTML; aTr[j].innerHTML = aTr[j+1].innerHTML; aTr[j+1].innerHTML = temp; } } } } </script> </head> <body> <table align="center" cellpadding="10"> <tr> <th>姓名</th> <th onclick="sort()" style="cursor:pointer;">年齡</th> <th>地址</th> </tr> <tr> <td>張三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>23</td> <td>天津</td> </tr> <tr> <td>王五</td> <td>28</td> <td>上海</td> </tr> <tr> <td>趙六</td> <td>26</td> <td>南京</td> </tr> <tr> <td>周七</td> <td>22</td> <td>上海</td> </tr> </table> <div>(效果: 試試點擊年齡...表格行會按照年齡大小進行排列)</div> </body> </html>
7. 一個綜合：
效果圖：
<!DOCTYPE HTML> <html> <head> <title>表單頁面</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> //表單被提交時會觸發onsubmit事件, 驅動該方法執行 function checkForm(){ var flag = true; //非空校驗 flag = checkNull("username", "用戶名不能為空") && flag; flag = checkNull("password", "密碼不能為空") && flag; flag = checkNull("password2", "確認密碼不能為空") && flag; flag = checkNull("nickname", "昵稱不能為空") && flag; flag = checkNull("email", "郵箱不能為空") && flag; flag = checkNull("img", "頭像不能為空") && flag; flag = checkNull("valistr", "驗證碼不能為空") && flag; flag = checkGenderAndLike("gender", "性別不能為空") && flag; flag = checkGenderAndLike("like", "愛好不能為空") && flag; flag = checkPassword("password", "兩次密碼不一致") && flag; flag = checkEmail("email", "郵箱格式不正確") && flag; return flag; } //檢查郵箱格式 function checkEmail(name, msg){ var email = document.getElementsByName(name)[0].value; setMsg(name, ""); if(email == ""){ setMsg(name, "郵箱不能為空"); }else{ var reg = /^\w+@\w+(\.\w+)+$/; if(!reg.test(email)){ setMsg(name, msg); return false; } } return true; } //檢查兩次密碼是否一致 function checkPassword(name, msg){ var psw = document.getElementsByName(name)[0].value; var psw2 = document.getElementsByName(name+"2")[0].value; setMsg(name+"2", ""); if(psw2 == ""){ setMsg(name+"2", "確認密碼不能為空"); return false; } if(psw != "" && psw2 != "" && psw != psw2){ setMsg(name+"2", msg); return false; } return true; } //檢查性別和愛好 function checkGenderAndLike(name, msg){ var flag = false; //獲取所有的選框, 遍歷, 只要有一個被選中, 就校驗通過 var objs = document.getElementsByName(name); for(var i=0; i<objs.length; i++){ if(objs[i].checked){ flag = true; } } setMsg(name, ""); if(!flag){ setMsg(name, msg); return false; } return true; } //當輸入框失去焦點時 function onblurTA(obj){ if(obj.value == ""){ obj.value = "請輸入描述信息~！"; } } //當輸入框獲得焦點時 function onfocusTA(obj){ if(obj.value == "請輸入描述信息~！"){ obj.value = ""; } } //檢查指定name的輸入框是否為空, 如果為空給出提示消息 function checkNull(name, msg){ var value = document.getElementsByName(name)[0].value; setMsg(name, "" ); if(value == ""){ //alert(msg); setMsg(name, msg); return false; } } //設置提示消息的方法 function setMsg(name, msg){ document.getElementById(name+"_msg").innerHTML = "<font style='color:red;font-size: 12px;'>"+ msg +"</font>"; } </script> </head> <body> <form action="http://localhost:8080" method="POST" onsubmit="return checkForm()" > <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"> <caption><font color="red" size="6">注冊表單</font></caption> <input type="hidden" name="id" value="9527"/> <tr> <td>用戶名:</td> <td> <input type="text" name="username" onblur="checkNull('username', '用戶名不能為空')"/> <span id="username_msg" ></span> </td> </tr> <tr> <td>密碼:</td> <td> <input type="password" name="password" onblur="checkNull('password', '密碼不能為空')"/> <span id="password_msg" ></span> </td> </tr> <tr> <td>確認密碼:</td> <td> <input type="password" name="password2" onblur="checkPassword('password', '兩次密碼不一致')"/> <span id="password2_msg" ></span> </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女 <span id="gender_msg" ></span> </td> </tr> <tr> <td>昵稱：</td> <td> <input type="text" name="nickname" onblur="checkNull('nickname', '昵稱不能為空')"/> <span id="nickname_msg" ></span> </td> </tr> <tr> <td>郵箱：</td> <td> <input type="text" name="email" onblur="checkEmail('email', '郵箱格式不正確')"/> <span id="email_msg" ></span> </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox" name="like" value="lq"/>籃球 <input type="checkbox" name="like" value="zq"/>足球 <input type="checkbox" name="like" value="qq"/>鉛球 <input type="checkbox" name="like" value="blq"/>玻璃球 <span id="like_msg" ></span> </td> </tr> <tr> <td>客戶類型：</td> <td> <select name="type"> <option value="pm">平民</option> <option value="sxdy">少先隊員</option> <option value="gqty">共青團員</option> <option value="ybdy">預備黨員</option> <option value="zsdy">正式黨員</option> </select> </td> </tr> <tr> <td>頭像：</td> <td> <input type="file" name="img" /> <span id="img_msg" ></span> </td> </tr> <tr> <td>描述信息：</td> <td> <textarea id="desc" rows="5" cols="45" name="desc" onblur="onblurTA(this)" onfocus="onfocusTA(this)">請輸入描述信息~！</textarea> <span id="desc_msg" ></span> </td> </tr> <tr> <td>驗證碼：</td> <td> <input type="text" name="valistr" onblur="checkNull('valistr', '驗證碼不能為空')"/> <img src="1.jpg" width="100px" height="20px"/> <span id="valistr_msg" ></span> </td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" value="提 交"/> <input type="reset" value="重 置"/> </td> </tr> </table> </form> </body> </html>