学习javaee第四天的加强训练-优快云博客

本文链接：https://blog.youkuaiyun.com/css1223mjf/article/details/51874021

本文介绍了使用JavaScript实现的一个猜数字小游戏及一个包含创建、删除、全选和全删功能的表格操作案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、关于一个小游戏的猜数字

<!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的一些基本功能，希望越来越强大