JAVA WEB开发技术作业 JS 实现学生列表及增加、删除修改_js实现学生列表及增加、删除修改-CSDN博客

本文链接：https://blog.csdn.net/qq_49488584/article/details/124398526

🌴 2022.4.18 作业

🌳 JS 实现学生列表及增加、删除修改

文章目录

🚀 前言

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏传送门

🚀 要求

编写html、css及js（不可以使用JQuery等js库）

功能要点：

模态框遮罩层实现，位置固定并占满整个窗口，背景灰色并半透明

表单在遮罩层中居中的实现，表单所在的遮罩层flex布局，主轴副轴都居中

动画效果的实现使用css中transition属性，并结合js代码，淡入淡出opacity变化，变大变小transform结合scale

卡片的增加，可以创建li后，将其内部的html编码（innerHTML）设置为已有的某个li的内部编码，然后再更改具体的内容

可以编写一个js函数实现由form表单填写的内容，设置li卡片内容；编写一个js函数实现有li卡片内容，初始化表单元素的值

html代码已经截图给出且最好不要修改

🚀 效果图

在这里插入图片描述

🚀 代码

小张自己的代码，仅供参考。源文件

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息列表</title>
		<link rel="stylesheet" type="text/css" href="99list.css" />
		<link rel="stylesheet" type="text/css" href="99form.css" />
	</head>
	<body>
		<div class="main-div">
			<div class="head-div light-blue">
				<button type="button" class="success" id="add-btn">新增</button>
				<button type="button" class="danger" id="del-btn">删除</button>
				<button type="button" class="warning" id="modify-btn">修改</button>
			</div>
			<div class="body-div">
				<ul id="msgList-ul">
					<li class="female">
						<div class="img-div">
							<img class="img" src="../img/9901.png">
						</div>
						<div class="msg-span-div">
							<span class="num-span">182056101</span>
							<span>
								<span class="name-span">张伞</span>
								<span class="sex-span">女</span>
							</span>
							<span class="depart-span">计算机工程系</span>
							<span class="like-span">
								<span>读书</span>
								<span>运动</span>
							</span>
						</div>
					</li>
					<li class="male">
						<div class="img-div">
							<img class="img" src="../img/9902.png">
						</div>
						<div class="msg-span-div">
							<span class="num-span">182056102</span>
							<span>
								<span class="name-span">李斯</span>
								<span class="sex-span">男</span>
							</span>
							<span class="depart-span">计算机工程系</span>
							<span class="like-span">
								<span>读书</span>
								<span>音乐</span>
								<span>学习</span>
							</span>
						</div>
					</li>
					<li class="male">
						<div class="img-div">
							<img class="img" src="../img/9903.png">
						</div>
						<div class="msg-span-div">
							<span class="num-span">182056103</span>
							<span>
								<span class="name-span">王武</span>
								<span class="sex-span">男</span>
							</span>
							<span class="depart-span">计算机工程系</span>
							<span class="like-span">
								<span>读书</span>
								<span>运动</span>
								<span>音乐</span>
							</span>
						</div>
					</li>
					<li class="female">
						<div class="img-div">
							<img class="img" src="../img/9904.png">
						</div>
						<div class="msg-span-div">
							<span class="num-span">182056104</span>
							<span>
								<span class="name-span">赵柳</span>
								<span class="sex-span">女</span>
							</span>
							<span class="depart-span">计算机工程系</span>
							<span class="like-span">
								<span>读书</span>
								<span>学习</span>
								<span>音乐</span>
							</span>
						</div>
					</li>

				</ul>
			</div>
			<div class="modal-div" style="display: none;">
				<form action="index.html" target="_blank" name="msgForm">
					<input type="hidden" name="act" id="act-input" value="">
					<div id='form-div'>
						<button class="modal-close-btn danger" type="button" id="close-modal-btn">×</button>
						<h2 style="margin: 8px;justify-content: center;">学生信息</h2>
						<div>
							<label>学号：</label>
							<div>
								<input type="text" name=