Eeveid/studycode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程代码

Browse Source
This commit is contained in:
zpooi
2025-12-03 23:08:39 +08:00
commit 290f629d2c
63 changed files with 7065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web_test/images/bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
web_test/images/libai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
web_test/images/relax.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 KiB

93
web_test/test1/plan.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的学习计划</title>
<style>
body {
font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.section {
background-color: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #3498db;
border-left: 4px solid #3498db;
padding-left: 10px;
}
ol, ul {
margin-left: 20px;
}
li {
margin: 10px 0;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.copyright {
text-align: center;
margin: 30px 0;
color: #7f8c8d;
}
.rest-img {
text-align: center;
margin: 20px 0;
}
.rest-img img {
max-width: 300px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<h1>我的待办事项与学习资源</h1>
<div class="section">
<h2>本周学习计划（周一至周三）</h2>
<ol>
<li>周一：学习HTML基础标签和语法</li>
<li>周二：练习CSS基础样式和布局</li>
<li>周三：完成第一次实验作业并复习</li>
</ol>
</div>
<div class="section">
<h2>学习资源网站（周四至周六）</h2>
<ul>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools在线教程</a></li>
<li><a href="https://developer.mozilla.org" target="_blank">MDN Web文档</a></li>
<li><a href="https://www.runoob.com" target="_blank">菜鸟教程</a></li>
</ul>
</div>
<div class="copyright">
<p>版权所有 &copy; [施光甲]</p>
</div>
<div class="rest-img">
<!-- 这里使用一个在线图片作为示例，实际使用时请替换为本地图片 -->
<img src="..\images\relax.png" alt="周日休息图片">
<p><em>周日：休息放松，为下一周做好准备</em></p>
</div>
</body>
</html>

59
web_test/test1/poem.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: "宋体", SimSun, serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
text-align: center;
}
p {
text-indent: 2em;
}
h2 {
text-align: center;
}
.poem {
text-align: center;
margin: 30px 0;
font-size: 18px;
line-height: 2;
}
hr {
border: 1px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>李白《静夜思》赏析</h1>
<p>《静夜思》是唐代诗人李白的经典诗作，它短小精悍，却蕴含着深深的思乡之情。</p>
<h2>原诗内容</h2>
<div class="poem">
<p><strong>床前</strong>明月光，</p>
<p>疑是地上霜。</p>
<p>举头<sup>①</sup>望明月，</p>
<p><em>低头思故乡</em>。</p>
</div>
<p>在诗中，“床前”这个词被加粗（床前），起到了一定的强调作用，让读者首先注意到诗人所处的位置。<br>
而“疑是地上霜”这句诗，通过“霜”这个字形象地描绘出月光的皎洁清冷，仿佛地上结了一层霜，这种感觉通过简单的文字就传达给了读者。<br>
当诗人“举头<sup>①</sup>望明月”时，这里的上标数字<sup>①</sup>可以用来做注释标记，表示对“举头”这个动作可能存在的特殊解读或者引用来源等，明月成为了引发思乡之情的重要媒介。<br>
最后“低头思故乡”，诗人<em>深沉地（用em标签表示情感上的强调）</em>陷入对故乡的思念之中。</p>
<hr>
<p>这首诗虽然没有华丽的辞藻，但每一个字都像是经过精心雕琢，<strong>强烈地（用strong标签表示语义上的强调）</strong>触动着读者内心深处的思乡情感，成为了千古流传的佳作。</p>
</body>
</html>

68
web_test/test2/attri_practice.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<style>
/* (3) 使用标记选择器将p标签中的字体颜色设置为#cc0000，字体大小为32px */
p {
color: #cc0000;
font-size: 32px;
}
/* (4) 使用id选择器将p标签的背景颜色设置为gray */
#paragraph {
background-color: gray;
}
/* (5) 使用类选择器将p标签中内容的对齐方式设置为水平居中对齐,字体样式为斜体，字体用宋体 */
.center {
text-align: center;
font-style: italic;
font-family: "SimSun", "宋体", serif;
}
/* (6) 使用伪类选择器，取消a标签的下划线 */
a {
text-decoration: none;
}
/* 注意：伪类选择器的顺序很重要，必须按照LVHA顺序 */
/* a标记未被访问时，字体颜色为gray */
a:link {
color: gray;
}
/* a标记在被访问后，字体颜色为#9900ff */
a:visited {
color: #9900ff;
}
/* 鼠标悬停在a标记上时，字体颜色为red，字体大小为24px */
a:hover {
color: red;
font-size: 24px;
}
/* a标记在被用户激活时，字体颜色为rgb(0, 204, 0) */
a:active {
color: rgb(0, 204, 0);
}
/* (7) 选取带有title属性的标记，并设置字体粗细为bold */
[title] {
font-weight: bold;
}
</style>
</head>
<body>
<!-- (1) 为p标签添加title属性，属性值为tit -->
<p id="paragraph" class="center" title="tit">一个段落</p>
<!-- (2) 实现a标签点击跳转到菜鸟教程的功能，要求在一个全新的空白窗口打开链接 -->
<a href="https://www.runoob.com" target="_blank">点击跳转到菜鸟教程</a>
</body>
</html>

27
web_test/test2/news.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新闻</title>
<style>
p {
letter-spacing: 6px;
/* 字符间距 */
line-height: 2em;
/* 行高 */
text-indent: 2em;
/* 首行缩进 */
word-spacing: 10px;
/* 单词间距 */
}
</style>
</head>
<body>
<p>昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。 Yesterday morning, the Jinling Conference Center of Nanjing
International Expo Center was filled with laughter and joy, and the provincial party committee and government
held a Spring Festival gathering here.</p>
</body>
</html>

48
web_test/test2/product.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>产品介绍</title>
<style>
/* 使用标记选择器为介绍重庆的段落设置样式 */
p.chongqing {
text-decoration: underline;
/* 下划线 */
text-transform: capitalize;
/* 首字母大写 */
}
/* 使用id选择器为介绍四川的段落设置样式 */
#sichuan {
text-decoration: line-through;
/* 删除线 */
text-transform: lowercase;
/* 所有字母小写 */
}
/* 使用类选择器为介绍贵州的段落设置样式 */
.guizhou {
text-decoration: overline;
/* 上划线 */
text-transform: uppercase;
/* 所有字母大写 */
}
</style>
</head>
<body>
<h3>设置文字装饰及大小写转换</h3>
<p class="chongqing">Chongqing, abbreviated as "Yu", is a municipality directly under the central and western
regions of China, famous for its mountainous city characteristics, hotpot culture, and the beautiful scenery of
the confluence of the Yangtze River and Jialing River.</p>
<p id="sichuan">Sichuan, abbreviated as "Chuan" or "Shu", is located in southwestern China and is a province known
for its magnificent natural scenery, rich cultural heritage, and spicy cuisine.</p>
<p class="guizhou">Guizhou, abbreviated as "Qian" or "Gui", is located in southwestern China and is a province
renowned for its diverse ethnic cultures, spectacular karst landforms, and beautiful natural landscapes.</p>
</body>
</html>

92
web_test/test3/table.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易学生表</title>
<link rel="stylesheet" href="tableTitle.css">
<style>
.tou {
background-color: #fff;
}
.shou {
background-color: yellowgreen;
}
.odd {
background-color: #CDF8F9;
}
.even {
background-color: #FDEFBB;
}
td,
th {
text-align: center;
}
</style>
</head>
<body>
<table border="1" width="600" height="400" align="center" cellspacing="0" cellpadding="5"
style="border-collapse: collapse;">
<caption>简易学生表</caption>
<!-- 表头行：姓名、单位、学号 -->
<tr class="tou">
<td></td>
<th>姓名</th>
<th>单位</th>
<th>学号</th>
</tr>
<!-- 数据行1：基数行，背景色#CDF8F9（由伪类控制） -->
<tr class="odd">
<td rowspan="4" class="shou">2024-2025学年</td>
<td>王小品</td>
<td>商学院</td>
<td>110204</td>
</tr>
<!-- 数据行2：偶数行，背景色#FDEFBB（由伪类控制） -->
<tr class="even">
<td>李中</td>
<td>财经学院</td>
<td>120204</td>
</tr>
<!-- 数据行3：基数行，含跨行单元格（rowspan="2"） -->
<tr class="odd">
<!-- 跨行单元格：“2024-2025学年”跨2行，对应实验“单元格跨行”要求 -->
<td>胡三</td>
<td>大数据学院</td>
<td>130504</td>
</tr>
<!-- 数据行4：偶数行，因上一行有跨行单元格，本行少1个td -->
<tr class="even">
<td>李白</td>
<td>人工智能学院</td>
<td>100244</td>
</tr>
<!-- 数据行5：含跨列单元格（colspan="3"），对应实验“单元格跨列”要求 -->
<tr>
<!-- 跨列单元格：“重庆城市科技学院”跨3列 -->
<td colspan="4">重庆城市科技学院</td>
</tr>
</table>
</body>
</html>

13
web_test/test3/tableTitle.css Normal file
View File

@@ -0,0 +1,13 @@
/* 表格标题(caption)样式定义，对应实验要求的标题样式 */
caption {
/* 标题字体粗细为bold */
font-weight: bold;
/* 标题字体大小为24px */
font-size: 24px;
/* 标题字体颜色为#0DAEB4 */
color: #0DAEB4;
/* 标题背景颜色为bisque */
background-color: bisque;
/* 标题行高为36px */
line-height: 36px;
}

51
web_test/test4/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<link rel="stylesheet" href="./public/mainMenu.css">
</head>
<body>
<ul class="main-menu">
<li><a href="#">菜单1</a>
<ul class="sub-menu">
<li><a href="#">菜单1-1</a></li>
<li><a href="#">菜单1-2</a></li>
<li><a href="#">菜单1-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">菜单2-1</a></li>
<li><a href="#">菜单2-2</a></li>
<li><a href="#">菜单2-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul class="sub-menu">
<li><a href="#">菜单3-1</a></li>
<li><a href="#">菜单3-2</a></li>
<li><a href="#">菜单3-3</a></li>
</ul>
</li>
</ul>
<div></div>
</body>
<body>
<ul class="main-menu">
<li><a href="#">菜单1</a><ul class="sub-menu"><li><a href="#">菜单1-1</a></li><li><a href="#">菜单1-2</a></li><li><a href="#">菜单1-3</a></li></ul></li>
<li><a href="#">菜单2</a><ul class="sub-menu"><li><a href="#">菜单2-1</a></li><li><a href="#">菜单2-2</a></li><li><a href="#">菜单2-3</a></li></ul></li>
<li><a href="#">菜单3</a><ul class="sub-menu"><li><a href="#">菜单3-1</a></li><li><a href="#">菜单3-2</a></li><li><a href="#">菜单3-3</a></li></ul></li>
</ul>
<div></div>
</body>
</html>

49
web_test/test4/public/mainMenu.css Normal file
View File

@@ -0,0 +1,49 @@
* {
margin: 0;
padding: 0;
font-size: 24px;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.sub-menu {
display: none;
}
ul>li:hover .sub-menu {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
.main-menu li {
background-color: #c22fef;
color: aliceblue;
border-radius: 2px;
text-align: center;
}
.main-menu>li {
width: 200px;
border: 1px solid #77049a;
margin: 1px 3px;
}
li:hover {
background-color: #a93aca;
}
div {
border: 20px solid red;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
display: inline-block;
}

60
web_test/test5/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./public/index.css">
<link rel="stylesheet" href="./public/mainMenu.css">
</head>
<body>
<!-- 页面容器 -->
<div class="container">
<header>
标题栏
</header>
<main class="clearfiexd">
<nav>
<ul class="main-menu">
<li><a href="#">菜单1</a>
<ul class="sub-menu">
<li><a href="#">菜单1-1</a></li>
<li><a href="#">菜单1-2</a></li>
<li><a href="#">菜单1-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">菜单2-1</a></li>
<li><a href="#">菜单2-2</a></li>
<li><a href="#">菜单2-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul class="sub-menu">
<li><a href="#">菜单3-1</a></li>
<li><a href="#">菜单3-2</a></li>
<li><a href="#">菜单3-3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="content">
<img src="../images/libai.png" alt="图片">
<div style="font-size: 0;">
<button>图片详情1</button>
<button>图片详情2</button>
<button>图片详情3</button>
</div>
</div>
</main>
<footer>&copy; 2025 FlexLayout 示例. 保留所有权利.</footer>
</div>
</body>
</html>

62
web_test/test5/public/index.css Normal file
View File

@@ -0,0 +1,62 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 24px;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #9a9bb4;
height: 80px;
line-height: 80px;
text-align: center;
}
main {
background-color: blue;
flex: 1;
display: flex;
}
main nav {
background-color: #9a9bb4;
float: left;
}
.content {
background-color: #e8d5d5;
/* width: 500px; */
margin-left: auto;
text-align: center;
flex-direction: column;
flex: 1;
}
.clearfiexd::after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
.content img {
width: 500px;
}
.content button {
margin-top: 20px;
margin-right: 20px;
padding: 5px;
}
footer {
text-align: center;
}

49
web_test/test5/public/mainMenu.css Normal file
View File

@@ -0,0 +1,49 @@
* {
margin: 0;
padding: 0;
font-size: 24px;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.sub-menu {
display: none;
}
ul>li:hover .sub-menu {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
.main-menu li {
background-color: #c22fef;
color: aliceblue;
border-radius: 2px;
text-align: center;
}
.main-menu>li {
width: 200px;
border: 1px solid #77049a;
margin: 1px 3px;
}
li:hover {
background-color: #a93aca;
}
/* div {
border: 20px solid red;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
display: inline-block;
} */

67
web_test/test6/login.css Normal file
View File

@@ -0,0 +1,67 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-image: url('../images/bg1.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.form-container {
width: 400px;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form div {
margin-bottom: 15px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 3px;
}
.user-type-label {
margin-right: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}

38
web_test/test6/login.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="./login.css">
</head>
<body>
<!-- 登录 -->
<div class="form-container">
<h2>欢迎登陆</h2>
<form class="form">
<div>
<label for="username">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" required><br>
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" required><br>
</div>
<div>
<label class="user-type-label">用户类型：</label>
<input type="radio" name="userType" value="1" checked>普通用户
<input type="radio" name="userType" value="2">管理员
</div>
<div>
记住我<input type="checkbox" name="rememberMe">
</div>
<button type="submit"><a href="../test5/index.html">登录</a></button>
</form>
</form>
</div>
</body>
</html>

67
web_test/test6/register.css Normal file
View File

@@ -0,0 +1,67 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-image: url('../images/bg1.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.form-container {
width: 400px;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form div {
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 3px;
}
.user-type-label {
margin-right: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}

38
web_test/test6/register.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<link rel="stylesheet" href="./register.css">
</head>
<body>
<div class="form-container">
<h2>注册</h2>
<form class="form">
<div>
<label for="username">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" required><br>
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" required><br>
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="请再次输入密码" required><br>
</div>
<div>
<label class="user-type-label">用户类型：</label>
<input type="radio" name="userType" value="1" checked>普通用户
<input type="radio" name="userType" value="2">管理员
</div>
<button type="submit"><a href="../test5/index.html">注册</a></button>
</form>
</form>
</div>
</body>
</html>

131
web_test/test7/index.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、字符串操作
// let str1 = "1203def456";
// let num1 = parseInt(str1);
// console.log("num1的值为:", num1);
// console.log("num1的数据类型:", typeof num1);
// let str2 = num1.toString();
// console.log("str2的值为:", str2);
// console.log("str2中的字符'0':", str2.charAt(1));
// 2、矩形面积计算函数
// function calculateArea(width, height) {
// let area = width * height;
// return area;
// }
// let scaleFactor = 2;
// let width = 5;
// let height = 3;
// let area = calculateArea(width * scaleFactor, height * scaleFactor);
// console.log("计算后的面积为:", area);
// 3、 使用for循环计算1+2+3+4+5的和
// let sum = 0;
// for (let i = 1; i <= 5; i++) {
// sum += i;
// }
// console.log("1+2+3+4+5的和为:", sum);
// 4. 通过提示框输入整数并判断奇偶
// let inputNum = prompt("请输入一个整数:");
// let result = (inputNum % 2 === 0) ? "该数是偶数" : "该数是奇数";
// alert(result);
// 5、操作数组
// 5.1 向arr1添加元素后
// 5.2 删除arr2最后一个元素后
// 5.3 删除arr3第一个元素后
// 5.4 在arr4开头添加元素后
// 5.5 数组转字符串
// 5.5 字符串转数组
// 5.6 拼接后的数组
// let arr1 = [1, 2, 3];
// let newLength1 = arr1.push(4);
// console.log("5.1 向arr1添加元素后:", arr1, "新长度:", newLength1);
// let arr2 = ['apple', 'banana', 'orange'];
// let removedElement2 = arr2.pop();
// console.log("5.2 删除arr2最后一个元素后:", arr2, "被删除的元素:", removedElement2);
// let arr3 = [1, 2, 3];
// let removedElement3 = arr3.shift();
// console.log("5.3 删除arr3第一个元素后:", arr3, "被删除的元素:", removedElement3);
// let arr4 = [1, 2, 3];
// let newLength4 = arr4.unshift(0);
// console.log("5.4 在arr4开头添加元素后:", arr4, "新长度:", newLength4);
// let arr5 = [1, 2, 3, 4];
// let strFromArr = arr5.join('-');
// let arrFromStr = strFromArr.split('-');
// console.log("5.5 数组转字符串:", strFromArr);
// console.log("5.5 字符串转数组:", arrFromStr);
// let arr6 = ['A', 'B', "C"];
// let arr7 = [true, false];
// let concatenatedArr = arr6.concat(arr7);
// console.log("5.6 拼接后的数组:", concatenatedArr);
// 6. 使用for循环循环打印fruits数组的元素
// let fruits = ["apple", "banana", "cherry"];
// console.log("6. fruits数组元素:");
// for (let i = 0; i < fruits.length; i++) {
// console.log(fruits[i]);
// }
// 7. 使用for...in循环遍历对象的属性
// let person = {
// name: "John",
// age: 30,
// city: "New York"
// };
// console.log("7. 遍历person对象:");
// for (let key in person) {
// console.log("属性名:", key, "属性值:", person[key]);
// }
// 8. 获得当前日期并格式化
function getCurrentDateFormatted() {
let now = new Date();
// 获取年、月、日、时、分、秒
let year = now.getFullYear();
let month = String(now.getMonth() + 1).padStart(2, '0');
let day = String(now.getDate()).padStart(2, '0');
let hours = String(now.getHours()).padStart(2, '0');
let minutes = String(now.getMinutes()).padStart(2, '0');
let seconds = String(now.getSeconds()).padStart(2, '0');
// 格式化日期字符串
let formattedDate = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return formattedDate;
}
// 在控制台输出
let currentDate = getCurrentDateFormatted();
console.log("8. 当前日期:", currentDate);
// 在页面上显示
document.body.innerHTML += `<p>当前时间: ${currentDate}</p>`;
</script>
</body>
</html>