HTML與JS Web前端入門
///////////////// 新增
<head>
<meta charset="UTF-8">
<!--
點選新增一行
-->
<script>
function regForm(){
var username = document.getElementById("uid");
var pwd = document.getElementById("pwd");
var email = document.getElementById("email");
//var msg = "<tr><td>"+username+"</td><td>"+pwd+"</td><td>"+eamail+"</td></tr>";
//document.getElementById("tab").innerHTML += msg;
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = username.value;
var td2 = document.createElement("td");
td2.innerHTML = pwd.value;
var td3= document.createElement("td");
td3.innerHTML = email.value;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("tab").appendChild(tr);
}
</script>
</head>
<body>
<div id="divId" align="center">
姓名 <input type="text" id="uid" name="unamename" />
密碼 <input type="password" id="pwd" name="pwd" />
郵箱 <input type="email" id="email" name="email" /> <br/>
<input type="button" value="提交" onclick="regForm()"/>
</div>
<hr/>
<div align="center">
<table border="1px" width="43%" id="tab">
<tr>
<td>姓名</td>
<td>密碼</td>
<td>郵箱</td>
</tr>
</table>
</div>
</body>
</html>
///////////// 複選框 選 全選 全不選 反選
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--
練習:全選/全部選
-->
<script>
function checkAll(){
var flag = document.getElementById("all").checked; //多選框中有一個屬性checked , 點選選中為true, 如果不選中false
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = flag; //拿到每一個元素都是多選框的物件,也有checked屬性
}
}
function ckAll(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = true;
}
}
function disCK(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = false;
}
}
function resverseCK(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = !arr[i].checked;
}
}
</script>
</head>
<body>
全選 <input type="checkbox" id="all" onclick="checkAll()"/><br/>
籃球: <input type="checkbox" name="hobby"/>
足球: <input type="checkbox" name="hobby"/>
排球: <input type="checkbox" name="hobby"/>
乒乓球: <input type="checkbox" name="hobby"/> <br/>
<input type="button" value="全選" onclick="ckAll()"/>
<input type="button" value="全不選" onclick="disCK()"/>
<input type="button" value="反選" onclick="resverseCK()"/>
</body>
</html>
///////// 下拉框選著 並彈出選著的東西
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"/> |
| <!-- |
| 得到select下中選中的option中的文字 |
| --> |
| <script> |
| //xml dom的方式實現 |
| function selectStu(){ |
| var sel = document.getElementById("stu"); |
| var index = sel.selectedIndex; |
| var val = sel.options[index].text; |
| alert(val); |
| } |
| </script> |
| </head> |
| <body> |
| <select id= "stu" onchange="selectStu()"> |
| <option value="xiaoxue">小學</option> |
| <option value="chuzhong">初中</option> |
| <option value="gaozhong">高中</option> |
| <option value="daxue">大學</option> |
| </select> |
| </body> |
| </html> |
///////////bom 瀏覽器物件模型 --- 操作window 瀏覽器視窗 ； location 瀏覽器位址列 history 歷史瀏覽記錄 dom 文件物件模型