【Javascript Day13、14、15、16】
html的DOM操作
// JS 是为了让页面实现动态网页效果
// 动态和静态区分取决于JS的和页面标签的数据交互
// 动态网页:有数据交互
// 静态网页:无数据交互
// JS 和 元素的关联操作对象 DOM
// 整个HTML页面的整体代码叫做 DOM文档
// 每个标签阶段叫做DOM对象|DOM元素|DOM节点
// JS 查询、修改、删除、更新 DOM元素的方式实现页面数据交互效果
document.write("<h1>DOM元素添加操作</h1>")
// document : DOM文档 => 整个页面代码
console.log(document);
// 元素查询,必须先保证元素存在 => dom查询必须晚于DOM的渲染
console.log( window.onload );
window.onload = function(){
console.log("HTML页面渲染完成");
// 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
var h1Dom = document.getElementById("a");
console.log(h1Dom);
// DOM对象.innerHTML 通过js = 赋值运算符,完成标签内容的填充
h1Dom.innerHTML = new Date().toLocaleString();
}
html的DOM查询方法
window.onload = function(){
// 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
var h1Dom = document.getElementById("a");
// 2. 基于标签名称查询元素集合
// => 返回的是一个类似数组结构但不能使用数组方法的类数组数据
var liList = document.getElementsByTagName("li");
console.log(liList);
// 3. 基于class样式查询元素集合
var tipList = document.getElementsByClassName("tip");
console.log( tipList );
// 基于el查询元素
// el|selecter:element select css选择器
// 4. document.querySelector => 从上而下查询第一个符合选择器规则元素,返回一个元素
// 5. document.querySelectorAll => 查询所有符合规则的元素,返回一个集合
var aDom = document.querySelector("#a");
console.log(aDom);
var tipDom = document.querySelector(".tip");
console.log(tipDom);
var tipDoms = document.querySelectorAll(".tip");
console.log(tipDoms);
var ulTipDoms = document.querySelectorAll("ul .tip");
console.log(ulTipDoms);
var ulDom = document.querySelector("#b");
console.log(ulDom);
// 从ulDom元素内部 查找class=tip的所有元素
var ulTipDoms2 = ulDom.querySelectorAll(".tip")
console.log(ulTipDoms2);
console.log( document ); // 文档类型标识,html-DOM对象
// 6. 快速获取HTML
console.log( document.documentElement ); // html-DOM对象
// 7. 快速获取body
console.log( document.body ); // body-DOM对象
// 8. 快速获取head
console.log( document.head ); // head-DOM对象
}
元素事件
function showTip(){
alert("111")
}
window.onload = function(){
// 步骤1:获取DOM对象
var btnDom1 = document.querySelector("#btn1");
// 步骤2:通过对象属性 onclick 取值方法完成事件绑定
btnDom1.onclick = function(){
alert("2222")
}
// console.log(btnDom1);
console.dir(btnDom1); // 输出对象格式
var liDoms = document.querySelectorAll("li");
for (var i = 0; i < liDoms.length; i++) {
// console.log( liDoms[i] );
liDoms[i].onclick = function(){
alert("li提示")
}
}
}
// 完整事件文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element#%E4%BA%8B%E4%BB%B6
元素的内容控制
<script>
// innerText 属性用于获取或覆盖标签内容
// 区别
// 取值:去除换行,首尾空格,去除标签和标签属性,只保留文本,文本之间的空格只保留一个
// 赋值:如果字符串符合标签格式,覆盖时不会进行标签解析
// 会将\n转换为<br>标签
function editTextContent(){
var textDom = document.querySelector("#text1")
var oldText1 = textDom.innerText;
console.log(oldText1);
// textDom.innerText = '<h3 style="color:red;">标签规则定义的字符串</h3>';
textDom.innerText = 'aaaa\nbbbb\nccccc';
}
</script>
<hr>
<div id="content">
html3的 原始内容
<span style="color: red;">标签</span>
</div>
<input type="button" value="textContent操作" οnclick="editContent()">
<script>
// textContent 属性用于获取或覆盖标签内容
// 特性等同于 innerText 的
// 和innerText区别
// 取值:不会删除换行,和空格
// 赋值:不会将\n转换为<br>
function editContent(){
var contentDom = document.querySelector("#content");
console.log( contentDom.textContent );
contentDom.textContent = 'aaaa\nbbbb\nccccc';
}
</script>
元素的属性操作
// 标签的自定义属性,被存放在 DOM对象的 attributes 属性对象上
// attributes 存储的自定义属性 以属性名作为对象key,value取值是一个对象提供value记录属性值
// attributes 属性在DOM对象上存在两个专用方法
// DOM对象.getAttribute("自定义属性名") => 获取自定义属性对应的值
// DOM对象.setAttribute("自定义属性名","属性值")
function getDomAttr(){
var pDom = document.querySelector("#pDom");
console.dir(pDom)
// console.log( pDom.username );
// console.log( pDom.attributes.username.value );
var v = pDom.getAttribute("username");
console.log(v);
}
function setDomAttr(){
var pDom = document.querySelector("#pDom");
console.log(1111);
// pDom.username = "李四";
// pDom.attributes.username.value = "李四"
pDom.setAttribute("username","李四")
}
元素样式操作
function setStyle(){
var pDom = document.querySelector("#pDom");
// JS获取的DOM对象,存在一个行内样式的记录属性 style
// dom对象.style.样式名 => 取样式
// dom对象.style.样式名="样式有效值" => 设置样式
console.log(pDom.style);
console.log( pDom.style.color );
// pDom.style.color = "blue";
// pDom.style.color = "rgb(0,255,0)";
// pDom.style.color = "rgba()";
// pDom.style.color = "#00FF00";
pDom.style.color = "#FF000099";
console.log( pDom.style.border );
// pDom.style.border = "2px solid red";
// pDom.style.border-color = "red"; // 报错
// pDom.style.borderColor = "red"; // 正确
pDom.style["border-color"] = "red"; // 正确
// 修改后的样式依然需要遵受样式优先级
}
// class 是所有代码系统的关键字 => 类
// class 在JS中是关键字
function editDomClass(){
var pDom = document.querySelector("#pDom");
// 因为class是关键字,所有 元素的类样式,没有使用class作为属性名
console.log( pDom.class );
// 标签的类样式,使用 className 作为DOM属性名
console.log( pDom.className ); // 取值
// className 赋值是和 标签定义class属性的规则一致
// 类样式名只有在样式代码中定义,才会存在样式
// 多个类样式直接以 空格 隔开
// pDom.className = "border"; // 完全覆盖
// 方法1 :以字符分割数组操作
// var str = pDom.className;
// var arr = str.split(" ");
// console.log(arr);
// arr.push("border");
// pDom.className = arr.join(" ");
// 方式2 : 字符串操作
// pDom.className = pDom.className + " border";
// 方法3 : h5辅助属性 classList
console.log( pDom.classist );
// pDom.classList.add("border"); // 添加新样式
// pDom.classList.remove("fc"); // 删除已有样式
pDom.classList.toggle("fc"); // 样式切换,当操作的样式存在则删除,不存在则添加
}
标签的dataset数据
<!--
DOM dataset 数据 :提供一种简单的自定义属性的赋值和取值操作
1. 在标签上以 data-自定义属性名 = "属性值" 的方式记录数据
2. 通过DOM对象的 dataset 直接调用 自定义属性名即可
-->
<p data-chw="张三" id="p1">dataset数据</p>
<input type="button" value="获取数据" οnclick="getDataSet1()">
<script>
function getDataSet1(){
var pDom1 = document.querySelector("#p1");
console.log( pDom1.attributes['data-chw'].value );
console.log( pDom1.getAttribute("data-chw") );
console.dir( pDom1 );
console.log( pDom1.dataset );
console.log( pDom1.dataset.chw );
}
</script>
页面组成
<!-- body 定义在 html 内部,所以 body是html子节点,html是body的父节点 -->
<!-- head body 兄弟节点 -->
<div class="ad">
<div class="content">
<img src="./img/831e0481607ea2a3.png" alt="" srcset="">
<input type="button" value="关闭" id="closeBtn">
</div>
</div>
<script>
var closeBtn = document.querySelector("#closeBtn");
closeBtn.onclick = function(){
console.log( this.parentNode );
console.log( this.parentNode.parentNode );
this.parentNode.parentNode.style.display = "none";
}
</script>
<hr>
<ul id="abc">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
<li>元素5</li>
</ul>
<input type="button" value="获取子节点" οnclick="printChildEle()">
<script>
function printChildEle(){
var lis = document.querySelectorAll("#abc li");
var ulDom = document.querySelector("#abc");
console.log( ulDom.childNodes );
console.log( ulDom.children );
}
</script>
节点的创建和添加
<input type="button" value="创建DIV" οnclick="createDom()">
<div id="box">
</div>
<script>
// document.createElement(标签名称) 基于标签名称创建DOM节点
// 任意的DOM元素.appendChild(DOM对象) 向指定的元素内部添加子DOM节点(追加)
function createDom(){
var divDom1 = document.createElement("div");
console.log(divDom1);
divDom1.innerHTML = "内容:" + Math.random();
divDom1.classList.add("fs");
divDom1.style.color = "red";
console.log(divDom1);
var boxDom = document.querySelector("#box");
// innerHTML需要字符串作为值,但DOM是对象,会被转换为 [object HTML标签名Element]
// boxDom.innerHTML = divDom1;
boxDom.appendChild( divDom1 )
}
</script>
<hr>
<div class="singBox">
<p>asdasdasdads</p>
<!-- <div class="sing">
<img src="https://imgessl.kugou.com/custom/150/20201207/20201207134716994336.jpg" alt="" srcset="">
<div class="info">
<p>乡村之旅:安静惬意·与自然同在</p>
<p>介绍</p>
<p>作者</p>
</div>
</div> -->
</div>
<script src="./js/singData.js"></script>
<script>
console.log(list);
function initSingDom(){
var box = document.querySelector(".singBox");
box.innerHTML = ""; // 清空旧数据
for (var i = 0; i < list.length; i++) {
// console.log(list[i]);
var imgDom = document.createElement("img");
imgDom.src = list[i].pic;
// console.log(imgDom);
var titleP = document.createElement("p");
titleP.innerHTML = list[i].title;
// console.log(titleP);
var infoP = document.createElement("p");
infoP.innerHTML = list[i].info;
// console.log(infoP);
var peP = document.createElement("p");
peP.innerHTML = list[i].pe;
// console.log(peP);
var divInfoBox = document.createElement("div");
divInfoBox.classList.add("info");
divInfoBox.appendChild(titleP);
divInfoBox.appendChild(infoP);
divInfoBox.appendChild(peP);
// console.log(divInfoBox);
var singBox = document.createElement("div");
singBox.classList.add("sing");
singBox.appendChild(imgDom);
singBox.appendChild(divInfoBox);
// console.log(singBox);
box.appendChild(singBox);
}
}
initSingDom()
</script>
节点的操作方法
<input type="button" value="添加元素" οnclick="appendChildDom()">
<input type="button" value="插入元素" οnclick="insertChildDom()">
<input type="button" value="删除元素" οnclick="removeChildDom()">
<div class="box" id="box">
<h5>默认第一个元素</h5>
<h5 id="a">默认第二个元素</h5>
</div>
<script>
var boxDom = document.querySelector("#box");
function appendChildDom(){
// 元素创建
var h5Dom = document.createElement("h5");
h5Dom.innerHTML = "appendChild标签内容";
// 在父元素的末尾追加新元素
boxDom.appendChild(h5Dom);
}
function insertChildDom(){
var h5Dom = document.createElement("h5");
h5Dom.innerHTML = "insertBefore标签内容" + Math.random() ;
// 元素DOM.insertBefore() 在父元素内部,指定已存在的子元素前面进行新元素的插入
// boxDom.insertBefore(h5Dom, boxDom.children[1] )
boxDom.insertBefore(h5Dom, boxDom.children[0] );
}
function removeChildDom(){
// boxDom.removeChild( boxDom.children[1] )
var h5Dom = document.querySelector("#a");
boxDom.removeChild( h5Dom )
}
</script>
<hr>
<!-- https://element.eleme.cn/#/zh-CN/component/transfer
穿梭框
-->
<div class="tr">
<div class="box" id="box1">
<p>元素1</p>
<p>元素2</p>
<p>元素3</p>
</div>
<div>
<input type="button" value=">" οnclick="moveChild()">
</div>
<div class="box" id="box2"></div>
</div>
<script>
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2")
function moveChild(){
// 元素的唯一性
box2.appendChild( box1.children[1] )
}
</script>
元素事件注册
<input type="button" value="按钮1" οnclick="showTip1()" οnclick="showTip2()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<script>
// 传统事件注册 => DOM对象的 事件属性的赋值操作
// + 同类型事件只能注册一次,HTML标签的后续注册不生效,JS的后续的注册属于覆盖操作
function showTip1(){
alert(1)
}
function showTip2(){
alert(11)
}
var btn2 = document.querySelector("#btn2");
// console.dir(btn2)
btn2.onclick = function(){
alert(2)
}
btn2.onclick = function(){
alert(22)
}
// 事件监听 => 独立于DOM属性之外的事件控制
// 事件监听的注册不是DOM对象的事件属性赋值
// 事件监听在同事件类型上,可以完成多方法的绑定 => 方法按照绑定先后触发
var btn3 = document.querySelector("#btn3");
// dom对象.addEventListener("事件名",执行方法)
// 事件名 是不包含on
btn3.addEventListener( "click", function(){
alert(3)
} );
btn3.addEventListener( "click", function(){
alert(33)
} );
btn3.addEventListener( "click", function(){
alert(333)
} );
// 浏览器在元素选项卡中,提供两个页面 事件监听 属性
// 事件监听:包含当前元素的所有事件
// 属性:包含当前元素的所有属性
// console.log(btn3);
</script>
相关文章:
【Javascript Day13、14、15、16】
html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页:有数据交互 // 静态网页:无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HT…...
linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上
linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上 这里的问题是 /usr/share/udhcpc/default.script脚本有问题 用下面正确脚本,即可写进去 #!/bin/sh# udhcpc script for busybox # Copyr…...

openGauss 3.0 数据库在线实训课程13: 学习逻辑结构:表管理1
前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见:openGauss 3.0.0数据库在线实训课程 学习目标 学习openGauss表的创建、搜索路径和访问方法等 课程作业 1.创建一个表(默认,不指定模式),查…...

网络编程-
文章目录 网络编程套接字UDP/TCP的api使用 网络编程套接字 socket,是操作系统给应用程序(传输层给应用层)提供的api,Java也对这个api进行了封装。 socket提供了两组不同的api,UDP有一套,TCP有一套&#x…...
基于单片机的常规肺活量SVC简单计算
常规肺活量 SVC(Slow Vital Capacity)是指尽力吸气后缓慢而又完全呼出的最大气量。 成年男性的肺活量通常在 3500-4000ml 之间,成年女性的肺活量通常在 2500-3000ml 之间。 单片机一般通过外接流量传感器,使用ADC高速采集的方式…...

【PostgreSQL】PG在windows下的安装
一、准备 通过官网下载安装文件,官方下载路径如下: https://www.postgresql.org/download/windows/ 二、安装 双击postgresql-17.3-1-windows-x64.exe文件,启动安装,进入安装步骤,点击Next 选择PG安装路径ÿ…...

电动汽车电池监测平台系统设计(论文+源码+图纸)
1总体设计 本次基于单片机的电池监测平台系统设计,其整个系统架构如图2.1所示,其采用STC89C52单片机作为控制器,结合ACS712电流传感器、TLC1543模数转换器、LCD液晶、DS18B20温度传感器构成整个系统,在功能上可以实现电压、电流、…...

基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真。可以设置多个不同的中心点。 2.测试软件版本以及运行结果展示 matlab2022a/matlab2024b版…...

单链表的概念,结构和优缺点
1. 概念 链表是一种物理存储结构上非连续,非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 2. 单链表的结构 单链表是由一系列节点组成的线性结构,每个结点包含两个域。:数据域和指针域。 数据域用来…...

SpringBoot+数据可视化的奶茶点单购物平台(程序+论文+讲解+安装+调试+售后)
感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,我会一一回复,希望帮助更多的人。 系统介绍 本奶茶点单购物平台搭建在 Spring Boot 框架之上,充分利用其强大的依赖管理机…...
深入理解 Vue3 中 ref 与 reactive 的区别及应用
深入理解 Vue3 中 ref 与 reactive 的区别及应用 在 Vue3 的开发世界里,响应式编程是其核心特性之一,而ref与reactive作为实现响应式的关键 API,理解它们的区别和适用场景对于开发者来说至关重要。本文将带你深入剖析这两个 API,…...
TDengine 客户端连接工具 taos-Cli
简介工具获取运行命令行参数 基础参数高级参数 数据导出/导入 数据导出数据导入 执行 SQL 脚本使用小技巧 TAB 键自动补全设置字符列显示宽度其它 错误代码表 简介 TDengine 命令行工具(以下简称 TDengine CLI)是用户操作 TDengine 实例并与之交互最简…...
Linux(ubuntu)下载ollama速度慢解决办法
国内安装Ollama都很慢,因为一直卡在下载中,直接通过官网的链接地址下载方法: curl -fsSL https://ollama.com/install.sh | sh速度大概是10min下载1%,完全不能接受啊! 其中很好的一个加速方式是通过使用github文件加速…...

Mac安装JD-GUI
Mac安装反编译工具步骤如下: 打开官网https://java-decompiler.github.io/ 选择下载mac的安装包解压下载好的压缩包,点击JD-GUI安装 有可能会遇到如下错误。请先检查是否安装JDK,通过java -version命令查看是否是1.8版本的jdk如果jdk没问题&…...

Jenkins 配置 Git Parameter 四
Jenkins 配置 Git Parameter 四 一、开启 项目参数设置 勾选 This project is parameterised 二、添加 Git Parameter 如果此处不显示 Git Parameter 说明 Jenkins 还没有安装 Git Parameter plugin 插件,请先安装插件 Jenkins 安装插件 三、设置基本参数 点击…...

【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南
【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南 一、前言 为了确保在 Docker 环境中顺利安装并高效运行 Ollama 以及 DeepSeek 离线模型,本文将详细介绍整个过程,涵盖从基础安装到优化配置等各个方面。通过对关键参数和配置的深入理解…...
Python 自然语言处理(NLP)和文本挖掘的常规操作过程
Python 自然语言处理(NLP)和文本挖掘 自然语言处理(NLP)和文本挖掘是数据科学中的重要领域,涉及对文本数据的分析和处理。Python 提供了丰富的库和工具,用于执行各种 NLP 和文本挖掘任务。以下是一些常见的…...
传统数组 vs vector和list
传统的数组: int arr[10]; 传统的数组有以下的缺点: 1)长度不可修改 2)内存分配 局部数组:把数组定在函数内, 数组便是局部变量,故会被分配在栈上 但栈的大小是有限制的 ,故其在内存中不能超…...

CRMEB 多商户版v3.0.1源码全开源+PC端+Uniapp前端+搭建教程
一.介绍 crmeb多商户是一套B2B2C商家入驻模式的平台多商户商城系统,系统支持平台自营、联营、招商等多种运营模式,可满足企业新零售、批发、分销、预售、O2O、多店、商铺入驻等各种业务需求。 后端全开源、uniapp多端可编译! 二、搭建教程…...

【ESP32】ESP-IDF开发 | WiFi开发 | HTTPS服务器 + 搭建例程
1. 简介 1.1 HTTPS HTTPS(HyperText Transfer Protocol over Secure Socket Layer),全称安全套接字层超文本传输协议,一般理解为HTTPSSL/TLS,通过SSL证书来验证服务器的身份,并为浏览器和服务器之间的通信…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...

通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
鸿蒙HarmonyOS 5军旗小游戏实现指南
1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发,采用DevEco Studio实现,包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...