🌴 2022.4.18 作业

🚀 要求

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

功能要点：

  1. 模态框遮罩层实现，位置固定并占满整个窗口，背景灰色并半透明
  2. 表单在遮罩层中居中的实现，表单所在的遮罩层flex布局，主轴副轴都居中
  3. 动画效果的实现使用css中transition属性，并结合js代码，淡入淡出opacity变化，变大变小transform结合scale
  4. 卡片的增加，可以创建li后，将其内部的html编码（innerHTML）设置为已有的某个li的内部编码，然后再更改具体的内容
  5. 可以编写一个js函数实现由form表单填写的内容，设置li卡片内容；编写一个js函数实现有li卡片内容，初始化表单元素的值
  6. html代码已经截图给出且最好不要修改

🚀 效果图

JAVA WEB开发技术26

🚀 代码

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

.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="number" maxlength="9" />
							</div>
						</div>
						<div>
							<label>姓名：</label>
							<div>
								<input type="text" name="name" />
							</div>
						</div>
						<div>
							<label>性别：</label>
							<div>
								<label>
									<input type="radio" name="sex" value="male" checked />
									<span>男</span>
								</label>
								<label>
									<input type="radio" name="sex" value="female" />
									<span>女</span>
								</label>
							</div>
						</div>
						<div>
							<label>兴趣爱好：</label>
							<div>
								<label>
									<input type="checkbox" name="like" value="music" />
									<span>音乐</span>
								</label>
								<label>
									<input type="checkbox" name="like" value="sport" />
									<span>运动</span>
								</label>
								<label>
									<input type="checkbox" name="like" value="read" />
									<span>读书</span>
								</label>
								<label>
									<input type="checkbox" name="like" value="study" />
									<span>学习</span>
								</label>
							</div>
						</div>
						<div>
							<label>所属院系：</label>
							<div>
								<select id="department">
									<option value="无">无</option>
									<option value="计算机工程系">计算机工程系</option>
									<option value="电子工程系">电子工程系</option>
									<option value="机械工程系">机械工程系</option>
								</select>
							</div>
						</div>
						<div>
							<label>个人简介：</label>
							<div>
								<textarea name="detail" cols="30" rows="4"></textarea>
							</div>
						</div>
						<div>
							<label>个人主页：</label>
							<div>
								<a href="http://baidu.com" target="_blank">个人主页地址</a>
							</div>
						</div>
						<div>
							<button type="button" id="submit-button">确定</button>
							<button type="reset" id="cancel-button">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="99list.js"></script>
</html>

99form.css

.modal-div {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #999;
	/* 透明 */
	opacity: 0.8;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* 关闭表单按钮 */
.modal-close-btn {
	position: absolute;
	top: -1rem;
	right: 0rem;
	width: 1rem;
	height: 2rem;
	border-radius: 1rem;
	font-size: 1.5rem;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

form {
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	border: solid #FF0000 1px;
	padding: 1rem;
	background-color: #ffcccc;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.5rem 0.5rem #ccc;
	width: 25rem;

	margin: 0 auto;
	z-index: 0;
	margin-top: 200px;
}

#form-div>div {
	display: flex;
	margin: 0.2rem;
}

#form-div>div>label {
	margin-top: 5px;
	margin-left: 10px;
	width: 30%;
	text-align: right;
}

#submit-button,
#cancel-button {
	color: white;
	background-color: #FF6688;
	border-radius: 0.3rem;
	font-weight: 700px;
	font-size: 20px;
	margin-left: 80px;
}

99list.css

html {
	font-size: 16px;
}

body {
	display: flex;
	padding: 0;
	margin: 0;
	flex-direction: column;
}

/* 三个按钮div */
.head-div {
	display: flex;
	height: 3rem;
	background-color: #cceeff;
	align-items: center;
	box-shadow: 0 0.5rem 1rem #CCCCCC;
}

/* 三个按钮布局 */
.head-div>button {
	height: 2rem;
	margin: 0.5rem 1rem;
	border-radius: 0.5rem;
	padding: 0.2rem 0.5rem;
	/* 鼠标样式 */
	cursor: pointer;
}

/* 按钮拾取焦点样式 */
.head-div>button:hover {
	transform: scale(1.1);
}

/* 新增按钮样式 */
.success {
	background-color: #33ff55;
	color: #222;
	font-weight: 700;
	border: #11ff22 solid 0.1rem;
	box-shadow: 0 0 0 0.2rem 0.2rem #88ffaa;
}

/* 删除按钮样式 */
.danger {
	background-color: #ff3355;
	color: #fee;
	font-weight: 700;
	border: #ff1111 solid 0.1rem;
	box-shadow: 0 0 0 0.2rem 0.2rem #ff99cc;
}

/* 修改按钮样式 */
.warning {
	background-color: #eeee22;
	color: #222;
	font-weight: 700;
	border: #ffff11 solid 0.1rem;
	box-shadow: 0 0 0 0.2rem 0.2rem #eeee22;
}

.add-btn:hover {
	background-color: #aaff22;
}

.danger:hover {
	background-color: #c70000;
}

.warning:hover {
	background-color: #eea222;
}

/* 整个ul布局 */
#msgList-ul {
	display: flex;
	/* 不够宽时换行 */
	flex-wrap: wrap;
}

/* ul中的li布局 */
#msgList-ul>li {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	margin: 1rem;
	border-radius: 1rem;
	box-shadow: 0.5rem 0.5rem 0.5rem #CCCCCC;
	/* 动画时长 */
	transition: all 0.5s;
}

/* li失去焦点 */
li:hover {
	/* 动画效果：放大 */
	transform: scale(1.1);
	/* 鼠标样式 */
	cursor: pointer;
}

/* li女 */
.female {
	border: 2px solid #F2F2F2;
	background-color: #ffccdd;
}

/* li男 */
.male {
	border: 2px solid #F2F2F2;
	background-color: #abccff;
}

/* 信息中的img */
.img-div {
	margin: 1rem;
}

/* 以下均是信息中的样式 */
.msg-span-div {
	display: flex;
	flex-direction: column;
	margin: 0 1rem;
}

.msg-span-div>span {
	display: flex;
	margin-bottom: 0.5rem;
}

.name-span {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
}

.like-span {
	justify-content: flex-start;
}

.depart-span {
	font-size: 0.8rem;
	font-weight: 500;
}

.like-span>span {
	padding: 0.2rem;
	margin: 0.2rem;
	border-radius: 0.3rem;
	font-weight: 700;
}

.female .like-span>span {
	background-color: #ff8844;
	color: #fdd;
}

.male .like-span>span {
	background-color: #4488ff;
	color: #ddf;
}

.sex-span {
	margin: 0 1rem;
}

.img {
	width: 10rem;
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.2rem 0.2rem #F2F2F2;
}

99list.js

// 获取新增按钮，点击显示表单
document.getElementById('add-btn').onclick = function() {
	document.getElementsByClassName('modal-div')[0].style.display = "inline";
}
// 获取x按钮，点击关闭表单
document.getElementById('close-modal-btn').onclick = function() {
	document.getElementsByClassName('modal-div')[0].style.display = "none";
}
// 给新增按钮添加监听
document.getElementById("add-btn").addEventListener("click", newadd);

function newadd() {
	document.getElementById('submit-button').onclick = function() {
		checkForm()
	}
}
// 修改按钮添加监听
document.getElementById("modify-btn").addEventListener("click", modify);

function modify() {
	document.getElementById('submit-button').onclick = function() {
		update()
	}
}

function checkForm() {
	// 创建add
	var mylist = document.getElementById('msgList-ul')
	var lis = document.createElement("li")
	lis.setAttribute("class", "female")
	var d = document.createElement("div")
	d.setAttribute("class", "img-div")

	var e = document.createElement("img")
	e.setAttribute("class", "img")
	e.setAttribute("src", "../img/9901.png")

	var w = document.createElement("div")
	w.setAttribute("class", "msg-span-div")

	document.getElementsByClassName('modal-div')[0].style.display = "none";
	mylist.appendChild(lis).appendChild(d).appendChild(e)

	mylist.appendChild(lis).appendChild(w)

	var t = document.createElement("span")
	t.setAttribute("class", "num-span")
	t.innerHTML = document.getElementsByTagName('input')[1].value
	mylist.appendChild(lis).appendChild(w).appendChild(t)

	var y = document.createElement("span")
	mylist.appendChild(lis).appendChild(w).appendChild(y)

	var u = document.createElement("span")
	u.setAttribute("class", "name-span")
	u.innerHTML = document.getElementsByTagName('input')[2].value
	mylist.appendChild(lis).appendChild(w).appendChild(y).appendChild(u)

	var i = document.createElement("span")
	i.setAttribute("class", "sex-span")
	// 性别判断
	let radioArr = document.getElementsByName("sex");
	let value;
	for (let index in radioArr) {
		if (radioArr[index].checked) {
			value = index;
			break;
		}
	}
	const descArr = ["男", "女"];
	console.log("选中：" + value + " ," + descArr[value]);
	if(value!=1){
		lis.setAttribute("class", "male")
	}
	i.innerHTML = descArr[value]


	mylist.appendChild(lis).appendChild(w).appendChild(y).appendChild(i)

	var o = document.createElement("span")
	o.setAttribute("class", "depart-span")

	var myselect = document.getElementById("department")
	var index = myselect.selectedIndex
	console.log(index)

	var oper_value = myselect.options[index].value
	console.log(oper_value)

	var oper_text = myselect.options[index].text

	o.innerHTML = oper_text
	mylist.appendChild(lis).appendChild(w).appendChild(o)

	var p = document.createElement("span")
	p.setAttribute("class", "like-span")
	mylist.appendChild(lis).appendChild(w).appendChild(p)


	var obj = document.getElementsByName("like");
	var baseTable = [];
	for (var i in obj) {
		if (obj[i].checked) {
			var n = document.createElement("span")
			if (obj[i].value == 'music') {
				n.innerHTML = '音乐'
			} else if (obj[i].value == 'sport') {
				n.innerHTML = '运动'
			} else if (obj[i].value == 'read') {
				n.innerHTML = '读书'
			} else if (obj[i].value == 'study') {
				n.innerHTML = '学习'
			}
			mylist.appendChild(lis).appendChild(w).appendChild(p).appendChild(n)
		}
	}
	var msglistUI = document.getElementById("msgList-ul")
	var liList = msglistUI.childNodes
	liList.forEach(function(item, index) {
		item.onclick = function() {
			clickItem(this)
		}
	})
}

function update() {
	var li = document.getElementsByClassName('active-li')
	var msgForm = document.msgForm
	var numSpan = li[0].getElementsByClassName('num-span')[0]
	numSpan.innerHTML = msgForm['number'].value

	var nameSpan = li[0].getElementsByClassName('name-span')[0]
	nameSpan.innerHTML = msgForm['name'].value

	var sexSpan = li[0].getElementsByClassName('sex-span')[0]
	sexSpan.innerHTML = msgForm['sex'].value == 'male' ? '男' : '女'
	console.log(sexSpan.innerHTML)

	var departSpan = li[0].getElementsByClassName('depart-span')[0]
	departSpan.innerHTML = msgForm['department'].value

	var likeSpan = li[0].getElementsByClassName('like-span')[0]
	msgForm['like'].forEach(function(item, index) {
		if (likeSpan.innerHTML.indexOf(item.nextElementSibling.innerHTML) > -1) {
			item.checked = 'checked'
		}
	})
	document.getElementsByClassName('modal-div')[0].style.display = "none";
}

function clickItem(ele) {
	if (ele.className.indexOf('active-li') > -1) {
		ele.className = ele.className.replace(' active-li', '')
	} else {
		var activeItems = document.getElementsByClassName(' active-li')
		if (activeItems.length > 0) {
			for (var i = 0; activeItems.length; i++) {
				activeItems[i].className = activeItems[i].className.replace(' active-li', '')
			}
		}
		ele.className = ele.className + ' active-li'
	}
}

function showModal(type) {
	if (type == 'modify') {
		var li = document.getElementsByClassName('active-li')
		if (li.length < 1) {
			alert('请选择要修改的学生')
			return
		}
		setFormByLi(li[0])
	}
	var modalDiv = document.getElementById('form-div')
	modalDiv.style.display = 'flex'

	var title = modalDiv.getElementsByClassName('form-title')[0]
	if (type == 'add') {
		title.innerHTML = '新增'

	} else {
		title.innerHTML = '修改'
	}
}

window.onload = function() {
	var msglistUI = document.getElementById("msgList-ul")
	var liList = msglistUI.childNodes
	liList.forEach(function(item, index) {
		item.onclick = function() {
			clickItem(this)
		}
	})

	var delBtn = document.getElementById("del-btn")
	delBtn.onclick = function() {
		deleteMsg()
	}
}

function deleteMsg() {
	var li = document.getElementsByClassName('active-li')[0].remove()
}

var modifyBtn = document.getElementById('modify-btn')
modifyBtn.onclick = function() {
	var li = document.getElementsByClassName('active-li')
	if (li.length < 1) {
		alert('请选择一个人')
		return
	} else {
		var li = document.getElementsByClassName('active-li')
		var msgForm = document.msgForm

		var numSpan = li[0].getElementsByClassName('num-span')[0]
		msgForm['number'].value = numSpan.innerHTML

		var nameSpan = li[0].getElementsByClassName('name-span')[0]
		msgForm['name'].value = nameSpan.innerHTML

		var sexSpan = li[0].getElementsByClassName('sex-span')[0]
		msgForm['sex'].value == sexSpan.innerHTML
		console.log(sexSpan.innerHTML)

		var departSpan = li[0].getElementsByClassName('depart-span')[0]
		msgForm['department'].value = departSpan.innerHTML

		var likeSpan = li[0].getElementsByClassName('like-span')[0]
		msgForm['like'].forEach(function(item, index) {
			if (likeSpan.innerHTML.indexOf(item.nextElementSibling.innerHTML) > -1) {
				item.checked = 'checked'
			}
		})
		document.getElementsByClassName('modal-div')[0].style.display = "inline";
	}
}

🚀 简略版

简略版是同学写的，老师前提是css与js分开，不能修改html，但是改一改html，js写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">
				<div id="btn-div">
					<button type="button" onclick="add()" class="sucess">新增</button>
					<button type="button" onclick="del()" class="delete">删除</button>
					<button type="button" onclick="upd()" class="warning">修改</button>
				</div>
			</div>
			<div class="body-div">
				<ul id="msgList-ul" class="checked">
				</ul>
			</div>
			<div class="box" style="display: none;">
				<div class="modal-div">
					<form class="form-box" name="form" action="#">
						<button class="delete" type="button" onclick="clo()" id="modal-close-btn">×</button>
						<div>
							<label>学号：</label>
							<input type="text" name="stuid" />
						</div>
						<div>
							<label>姓名：</label>
							<input type="text" name="name" />
						</div>
						<div>
							<label>确认密码：</label>
							<input type="password" name="pass" />
						</div>
						<div>
							<label>专业：</label>
							<select name="profession">
								<option value="00">请选择</option>
								<option value="计算机科学与技术">计算机科学与技术</option>
								<option value="软件工程">软件工程</option>
								<option value="数字媒体">数字媒体</option>
								<option value="网络工程">网络工程</option>
							</select>
						</div>
						<div>
							<label>性别：</label>
							<input type="radio" name="sex" value="男" />男
							<input type="radio" name="sex" value="女" />女
						</div>
						<div>
							<label>爱好：</label>
						
								<input type="checkbox" name="like" value="体育" />体育
						
								<input type="checkbox" name="like" value="旅游" />旅游
					
								<input type="checkbox" name="like" value="听音乐" />听音乐
						
								<input type="checkbox" name="like" value="读书" />读书
							
						</div>
						<div>
							<label>email：</label>
							<input type="text" name="email" />
						</div>
						<div>
							<button type="button" onclick="sub()">确定</button>
					
							<input type="reset" value="取消" />
						</div>
						<div>
							<label>简介：</label>
							<textarea name="introduction" cols="10" rows="5"></textarea>
						</div>
						<div>
					</form>
				</div>
			</div>
		</div>
		<script>
			const arr = []
			const box = document.querySelector('.box')
			const ul = document.querySelector('ul')
			//关闭弹框
			function clo(){
				box.style.display = 'none'
			}
			//新增
			function add(){
				form.stuid.value = ''
				form.name.value = ''
				form.pass.value = ''
				form.profession.value = ''
				form.sex.value = ''
				form.email.value = ''
				form.introduction.value = ''
				const like = document.getElementsByName("like");
				for(var i=0;i<like.length;i++){
					like[i].checked = false
				}
				box.style.display = 'block'
			}
			//删除
			function del(){
				const num = sessionStorage.getItem('check',event.target.classList[1])
				ul.removeChild(ul.childNodes[num])
				const liarr = document.querySelectorAll('li')
				for(let i = 0;i<liarr.length;i++){
					liarr[i].style.transform = 'scale(1)'
				}
				sessionStorage.setItem('check','')
			}
			//修改
			function upd(){
				box.style.display = 'block'
				const num = sessionStorage.getItem('check',event.target.classList[1])
				form.stuid.value = arr[num].stuid
				form.name.value = arr[num].name
				form.pass.value = arr[num].pass
				form.profession.value = arr[num].profession
				form.sex.value = arr[num].sex
				form.email.value = arr[num].email
				form.introduction.value = arr[num].introduction
				const like = document.getElementsByName("like");
				for(var i=0;i<like.length;i++){
					
					for(var i=0;i<arr[num].like.length;i++){
						if(arr[num].likeArr[i] === like[i].value){
							like[i].checked = true
						}
					}
				}
			}
			//提交
			function sub(){
				
				const stuid = form.stuid.value
				const name = form.name.value
				const pass = form.pass.value
				const profession = form.profession.value
				const sex = form.sex.value

				const email = form.email.value
				const introduction = form.introduction.value
				const like = document.getElementsByName("like");
				let likeArr = []

				for(var i=0;i<like.length;i++){
					if(like[i].checked){
						likeArr.push(like[i].value)
					}
				}     
				const obj = {
					stuid:form.stuid.value,
					name:form.stuid.value,
					pass:form.pass.value,
					profession:form.profession.value,
					sex:form.sex.value,
					email:form.email.value,
					introduction:form.introduction.value,
					likeArr:likeArr
				}
				arr.push(obj)
				const li = document.createElement('li')
				const liarr = document.querySelectorAll('li')

				let length = liarr.length + 1
				
				let a = ''
				for(let i = 0;i<likeArr.length;i++){
					a += "<span>"+ likeArr[i] + "</span>"
				}
				
				if(sex === '男'){
					li.classList.add('male')
					
				}else{
					li.classList.add('female')
				}
				li.classList.add(`${length}`)
				li.innerHTML = `
					<div class="img-div">
						<img class="img" src="../img/04.jpeg">
					</div>
					<div class="msg-span-div">
						<span class="number-span">${stuid}</span>
						<span>
							<span class="name-span">${name}</span>
							<span class="sex-span">${sex}</span>
						</span>
						<span class="depart-span">${profession}</span>
						<span class="like-span">
							${a}
						</span>
					</div>
				`
				ul.appendChild(li)
				box.style.display = 'none'
			}
			//选中
			
			const checked = document.querySelector('.checked')
			checked.onclick = function (event) {
				event.preventDefault()
				const liarr = document.querySelectorAll('li')
				for(let i = 0;i<liarr.length;i++){
					liarr[i].style.transform = 'scale(1)'
				}
				
				if(event.target.nodeName.toLowerCase() === "li") {
					event.target.style.transform = 'scale(1.1)';
					sessionStorage.setItem('check',event.target.classList[1])
				}
				
			}
		</script>
	</body>
</html>