6.23JavaScript基础练习-优快云博客

本文链接：https://blog.youkuaiyun.com/ws1995_java/article/details/80845782

本文介绍了一个简单的猜拳游戏实现方法，通过HTML、CSS和JavaScript进行开发，并演示了如何使用JavaScript来操作HTML表格，包括添加、修改和删除行。

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

猜拳游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>猜拳游戏</title>
		<style type="text/css">
			.pic{
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="pic" style="width: 180px;height: 180px;border: solid 1px black;">用户<br/><img src="img/石头.PNG" id="user"></div>
		<div class="pic" style="width: 180px;height: 180px;border: solid 1px black;">电脑<br/><img src="img/石头.PNG" id="comp"></div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<div>
			请选择你的手势:
			<select id="choose" οnchange="useronchange()">
				<option>石头</option>
				<option>剪刀</option>
				<option>布</option>
			</select>
			<input type="button" value="确认选择" οnclick="compareBoth(u)" />
		</div>
		<hr />
		结果:<span id="p"></span>
		<br/>
		<hr/>
		<input type="button" value="显示所有结果" οnclick="allmatch()"/>
		<input type="button" value="重置结果计数板" οnclick="nothing()"/>
	</body>
	<script type="text/javascript">
		//用户选择
		function userChoose(){
			var hand = document.getElementById("choose").value;
			var num = daiti(hand);
			return num;
		}
		//数字代替手势
		function daiti(hand){
			if(hand=="石头"){
				return 1;
			}
			if(hand=="剪刀"){
				return 2;
			}
			if(hand=="布"){
				return 3;
			}
		}
		//手势代替数字
		function daiti2(num){
			if(num==1){
				return "石头";
			}
			if(num==2){
				return "剪刀";
			}
			if(num==3){
				return "布   "; 
			}
		}
		//电脑选择
		function computerChoose(){
			var hand = Math.random()*100;
			hand = Math.ceil(hand);
			hand = hand%3+1;
			return hand;
		}
		//修改图片
		function change(id,num){
			var obj = document.getElementById(id);
			switch(num){
				case 1:
					obj.src = "./img/石头.PNG";
					break;
				case 2:
					obj.src = "./img/剪刀.PNG";
					break;
				case 3:
					obj.src = "./img/布.PNG";
					
			}
		}
		var str ="用户VS电脑----结果\n";
		var u = userChoose();
		function useronchange(){
			//用户选择
			u = userChoose();
			change("user",u);
		}
		function compareBoth(u){
			console.log(u);
			//电脑随机产生
			var c = computerChoose();
			//用户选择
			var ustr = daiti2(u);
			var cstr = daiti2(c);
			var pid = document.getElementById("p");
			var win ;
			if(u==1&&c==2){
				pid.innerText = "你赢了";
				win = "赢";
			}
			if(u==2&&c==3){
				pid.innerText = "你赢了";
				win = "赢";
			}
			if(u==3&&c==1){
				pid.innerText = "你赢了";
				win = "赢";
			}
			if(u==c){
				pid.innerText = "平局";
				win = "平";
			}
			if(c==1&&u==2){
				pid.innerText = "你输了";
				win = "输";
			}
			if(c==2&&u==3){
				pid.innerText = "你输了";
				win = "输";
			}
			if(c==3&&u==1){
				pid.innerText = "你输了";
				win = "输";
			}
			str = str+(ustr+"---"+cstr+"-----"+win+"\n");
			console.log(str);
			change("comp",c);
		}
		//输出所有游戏结果
		function allmatch(){
			alert(str);
		}
		//清空游戏计数板
		function nothing(){
			str ="用户VS电脑----结果\n";
			alert("已将所有游戏结果清空");
		}
	</script>
</html>

水浒好汉

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>table操作</title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="300px" id="t">
			<tbody><tr>
				<td>序号</td>
				<td>姓名</td>
				<td>操作1</td>
				<td>操作2</td>	
			</tr>
			<tr>
				<td>1</td>
				<td>宋江</td>
				<td><span οnclick="delrow(this)">删除</span></td>
				<td><span οnclick="xiugai(this)">修改</span></td>
			</tr>
			<tr>
				<td>2</td>
				<td>卢俊义</td>
				<td><span οnclick="delrow(this)">删除</span></td>
				<td><span οnclick="xiugai(this)">修改</span></td>
			</tr>
		</tbody></table>
		<form>
			<p>序号:<input type="text" id="xuhao"></p>
			<p>姓名:<input type="xingming" id="xingming"></p>
			<p><button type="button" id="add" οnclick="a()">添加</button></p>
		</form>
	</body>
		<script type="text/javascript">
			//添加函数
			function a(){
				//获取输入的数据
				var tbl=document.getElementById('t');
				//获取id对应标签中需要添加的值
				var x=document.getElementById("xuhao").value;
				var m=document.getElementById("xingming").value;
				//检查不要重复插入
				if(tbl.innerText.indexOf(m)>=0){
					alert("您输入的姓名或序号已经存在，请不要重复添加");
					return false;
				}
				//插入一行
				
				var atr=tbl.insertRow();
				var td1=atr.insertCell();
				var td2=atr.insertCell();
				var td3=atr.insertCell();
				var td4=atr.insertCell();
				td1.innerText=x;
				td2.innerText=m;
				
				//方式一:
				//创建span标签
				var s=document.createElement("span");
				//添加text属性
				s.innerText="删除";
				//将span添加到td3中
				td3.appendChild(s);
				//给新的span标签绑定事件
				s.addEventListener('click',function(){
					delrow(s);
				});
				
				//方式二:
				//在双引号中的双引号需要改为单引号
				td4.innerHTML = "<span οnclick='xiugai(this)'>修改</span>";
			}

			function delrow(elm){
				elm.parentElement.parentElement.remove();
			}
			function obj(elm){
				return elm.parentElement.parentElement;
			}
			//需要传入一个形式参数,用来获取本标签的属性值
			function xiugai(elm){
				//获取table标签对象
				var tab = document.getElementById("t");
				//获取tr标签对象
				var trid = elm.parentElement.parentElement;
				//获取tr下的td标签对象数组
				var tdid = trid.children;
				//用来接收修改后的数值
				var flag1;
				var flag2;
				flag1 = window.prompt("重新输入序号");
				if(tab.innerText.indexOf(flag1)>=0){
					alert("您输入的姓名或序号已经存在，请不要重复添加");
					return false;
				}
				if(flag1){
					flag2 = window.prompt("重新输入姓名");
					if(tab.innerText.indexOf(flag2)>=0){
						alert("您输入的姓名或序号已经存在，请不要重复添加");
						return false;
					}
					if(flag2){
						tdid[0].innerText = flag1;
						tdid[1].innerText = flag2;
					}
				}
			}
		</script>
</html>