一、关于一个小游戏的猜数字
<!DOCTYPE html>
<html>
<head>
<title>JS_five.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var ran = Math.ceil(Math.random()*100);
alert(ran);
function verify(){
var answer = document.getElementsByName("answer")[0].value;
if(ran > answer){
alert("您猜小了");
}else if(ran < answer){
alert("您財大了!");
}else{
alert("恭喜您才對了");
var jx = window.confirm("是否繼續");
if(jx){
window.location.reload();
}
}<pre name="code" class="html"></script>
</head>
<body>
<input type="text" name="answer" /><br />
<input type="button" value="提交" onclick="verify()" />
</body>
</html>
二、关于一个表格的创建和删除还有全部选中和全部删除的小复杂功能
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>JS_six.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/*
<tr>
<td><input type="checkbox" name="item" /></td>
<td>1</td>
<td>張三</td>
<td>123</td>
<td>123</td>
<td>廣州</td>
<td><a href="#" onclick="del()" />刪除</a></td>
</tr>
*/
//添加的功能
function add(){
//创建tr标签和7个td标签
var trelement = document.createElement("tr");
var td1element = document.createElement("td");
var int1element = document.createElement("input");
int1element.setAttribute("type", "checkbox");
int1element.setAttribute("name", "item");
td1element.appendChild(int1element);
var td2element = document.createElement("td");
var useridvalue = document.getElementsByName("userid")[0].value;
td2element.innerHTML = useridvalue;
var td3element = document.createElement("td");
var usernamevalue = document.getElementsByName("username")[0].value;
td3element.innerHTML = usernamevalue;
var td4element = document.createElement("td");
var passwordvalue = document.getElementsByName("password")[0].value;
td4element.innerHTML = passwordvalue;
var td5element = document.createElement("td");
var phonevalue = document.getElementsByName("phone")[0].value;
td5element.innerHTML = phonevalue;
var td6element = document.createElement("td");
var addressvalue = document.getElementsByName("address")[0].value;
td6element.innerHTML = addressvalue;
var td7element = document.createElement("td");
var aelement = document.createElement("a");
aelement.setAttribute("href", "#");
aelement.setAttribute("onclick", "del(this)");
aelement.innerHTML = "刪除";
td7element.appendChild(aelement);
//2、把所有的td都放進tr裡面
trelement.appendChild(td1element);
trelement.appendChild(td2element);
trelement.appendChild(td3element);
trelement.appendChild(td4element);
trelement.appendChild(td5element);
trelement.appendChild(td6element);
trelement.appendChild(td7element);
//3、把tr放進tb中
var tb = document.getElementById("tb");
tb.appendChild(trelement);
}
//全選的功能
function checkAll(element){
//得到当前该按钮的状态
var statue = element.checked;
//遍历所有的item属性的item列表,然后让他们的状态都变成该当前按钮的状态
var itemList = document.getElementsByName("item");
for(var i in itemList){
itemList[i].checked = statue;
}
}
//刪除功能
function del(element){
var tr = element.parentNode.parentNode;
var tb = document.getElementById("tb");
tb.removeChild(tr);
}
//刪除全部功能
//注意:如果采用循环的方法,i++后,i的位置会往下移,但是选中 的item会往上移,则需要i++以后再i--,这样i的位置就不会变
function delAll(){
var itemList = document.getElementsByName("item");
for(var i=0;i<itemList.length;i++){ //遍历所有item的列表,然后得到他们的父节点的父节点再删除
if(itemList[i].checked == true){
var parent = itemList[i].parentNode.parentNode;
var tb = document.getElementById("tb");
tb.removeChild(parent);
i--;
}
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="500px" id="tb">
<tr>
<th>選中</th>
<th>編號</th>
<th>用戶</th>
<th>密碼</th>
<th>電話</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<td colspan="7">
<input type="checkbox" onclick="checkAll(this)" />全部選中
<a href="javascript:void(0)" onclick="delAll()">全部刪除</a></td>
</tr>
</table>
<form action="">
<table border="1px" align="center" width="500px">
<tr>
<td>編號</td>
<td><input type="text" name="userid" /></td>
</tr>
<tr>
<td>用戶</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>電話</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>地址</td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="button" value="保存" onclick="add()" /></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
通过这两天的基础练习和加强联系,我已经基本能够掌握js的一些基本功能,希望越来越强大