效果图如上；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 60%;
height: 600px;
margin: auto;
border: solid 1px red;
}
.box>div {
margin: 20px;
}
h2 {
text-align: center;
}
.imgs {
display: flex;
line-height: 100px;
}
.imgs img {
width: 100px;
height: 100px;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
td,th {
border: solid 1px;
}
</style>
</head>
<body>
<div class="box">
<h2>学生管理系统</h2>
<div class="imgs">
<div>学生头像:</div>
<div style="margin-left: 30px;">
<img src="./img/1.jpeg" alt="">
<img src="./img/2.jpeg" alt="">
<img src="./img/3.jpeg" alt="">
<img src="./img/4.jpeg" alt="">
<img src="./img/5.jpeg" alt="">
</div>
</div>
<div>
<label>
姓名: <input type="text" class="username">
</label>
</div>
<div>
<label>性别:</label>
<label>
<input type="radio" name="sex" value="0" checked>男
</label>
<label>
<input type="radio" name="sex" value="1">女
</label>
</div>
<div>
<label>
年龄: <input type="text" class="age">
</label>
</div>
<div>
<button type="button" onclick="addArr()">添加</button>
</div>
<div class="table">
<table>
<thead>
<tr>
<th>序号</th>
<th>头像</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
</div>
<div class="noData">
<h3>暂无学生信息</h3>
</div>
</div>
<script>
// 获取dom元素
// name add(关键字 保留字都不能作为变量使用)
// 所有用getElements All获取的都是类数组,获取到的dom元素不能直接使用,要用数组使用数组元素的方法使用
// querySelect和querySelectorAll: 这两种是特殊的获取dom元素的方法,可以获取标签(input) 类名(.类名) id(#id)
// 获取类名的时候加 '>' 只能获取当前类名下的第一级子元素,第二级子元素获取不到,想获取用 ' '(空格)
var imgs = document.querySelectorAll('.imgs img')
var username = document.querySelector('.username')
var age = document.querySelector('.age')
var radios = document.querySelectorAll('input[type = radio]')
var tbody = document.querySelector('tbody')
var table = document.querySelector('.table')
var noData = document.querySelector('.noData')
// console.log(radios)
var imgSrc = '' // 创建全局变量(在script中,除了声明之前,都可以使用)
// 头像切换(tab切换)
// 所有涉及到数组的内容,都要循环
for (var i = 0; i < imgs.length; i++) {
// imgs[i]: 获取当前数组中的每一项
// console.log(imgs[i])
// 要给每一个don元素添加点击事件
imgs[i].onclick = function () {
// 清除其他未选中的选中样式
// 为什么要循环: 清除的内容不止一个 内容调用不到外部循环的dom元素
// 为什么要用J: 嵌套循环,不能创建同一个变量,同级循环可以
for (var j = 0; j < imgs.length; j++) {
imgs[j].style.border = '' // 清空选中的边框样式
}
// 在循环添加事件中,获取不到外部的dom元素,所以使用this
// this: this是指当前触发事件的元素,tab切换中,谁触发事件,说明谁被点击
this.style.border = 'solid 3px red'
// imgSrc = this.src
imgSrc = this.getAttribute('src')
}
}
var arr = [] // 创建一个空的数组,用于存储数据
// if的条件判断是将括号内的内容转换成true或者false
// 判断localStorage.arr0909是否存在
if (localStorage.arr0909) {
// 如果本地存储中有数据,就将存储的数据赋值给全局变量arr进行页面渲染
// JSON.parse(): 是将字符串转换成数组/对象格式
// 因为本地存储中只能存储字符串,所以取出数据时,需要将数据还原(页面渲染循环需要使用数组)
arr = JSON.parse(localStorage.arr0909)
}
// 执行一个页面渲染(不管本地存储中有没有数据,都执行一次渲染),如果本地存储有数据,不执行渲染,页面中无法显示内容
showArr()
// 添加的点击事件
function addArr() {
if (!imgSrc) {
alert('请选择头像')
return // 阻断代码执行
} else if (!username.value) {
alert('请填写姓名')
return
} else if (!age.value) {
alert('请填写年龄')
return
} else {
// console.log(username.value)
// console.log(age.value)
// console.log(imgSrc)
// console.log(radios[0].value)
var radioValue = ''
// 循环单选dom元素的数组,判断哪一个单选有checked属性,有表示被选中
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
// console.log(radios[i].value)
radioValue = radios[i].value
}
}
// console.log(radioValue)
// arr.push(username.value)
// arr.push(age.value)
// arr.push(radioValue)
// arr.push(imgSrc)
// console.log(arr)
// 为什么要用对象: 为了让数据有规律的存储
var obj = {
username: username.value,
age: age.value,
radio: radioValue,
imgSrc: imgSrc,
time: getTime(),
// new Date().getTime(): 获取当前时间的时间戳
id: new Date().getTime() // id是当前数据独一无二的标识,是数据的身份
}
arr.push(obj)
// console.log(arr)
// 数据发生改变,重新渲染页面
showArr()
// 数据发生改变,需要和本地存储同步
// 本地存储中只能存储字符串/数字类型,所以要将数组/对象类型转换成字符串存储
localStorage.arr0909 = JSON.stringify(arr)
// 添加成功后的页面清空
username.value = ''
age.value = ''
radios[0].checked = true
// console.log('this------------:', this)
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.border = ''
}
}
}
// 渲染
function showArr() {
// 判断是否有数据,如果有数据,table显示,,noData隐藏,如果没有数据,table隐藏,noData显示
// arr.length: 数组长度 没有数据,长度为0,转换成boolean值,是false
if (arr.length) {
table.style.display = 'block'
noData.style.display = 'none'
} else {
table.style.display = 'none'
noData.style.display = 'block'
}
// 为什么声明在循环外: 循环中创建字符串,i++后,都会重新创建一个新的的字符串,导致上一次循环拼接的字符串丢失
var str = ''
for(var i = 0; i < arr.length; i++) {
// str+= 相当于str = str + ''
// ``: 在反单引号中可以使用 ${}, {}中是变量名称,字符串拼接'' ""
str += `
<tr>
<td>${i + 1}</td>
<td><img src='${arr[i].imgSrc}' style='width: 50px;'></td>
<td>${arr[i].username}</td>
<td>${getValue(arr[i].radio)}</td>
<td>${arr[i].age}</td>
<td>${arr[i].time}</td>
<td><button type='button' onclick='delData(${arr[i].id})'>删除</button></td>
</tr>
`
}
// 将拼接好的字符串插入到页面当中(会覆盖掉父元素中的所有标签)
tbody.innerHTML = str
}
// 将单选的value值转换成中文渲染页面
function getValue(value) {
// return value == 0 ? '男' : '女'
var str = ''
if (value == 0) {
str = '男'
} else {
str = '女'
}
return str
}
// 获取当前的时间
function getTime() {
// new Date(): 标准的时间对象
var time = new Date()
var year = time.getFullYear()
var month = time.getMonth() + 1 // 月份是从0开始计数的,所以要加1
var day = time.getDate()
var hour = time.getHours()
var min = time.getMinutes()
var mil = time.getSeconds()
var time1 = year + '-' + changeNum(month) + '-' + changeNum(day) + ' ' + changeNum(hour) + ':' + changeNum(min) + ':' + changeNum(mil)
return time1
}
// 补零函数
function changeNum(t) {
return t < 10 ? '0' + t : t
}
// 删除
function delData(id) {
// 删除: 在数组中查找要删除的数据
for (var i = 0; i < arr.length; i++) {
// 循环中判断数组中每一项的id是否和传入的id相同,如果相同,删除当条数据
if (arr[i].id == id) {
// splice: 删除: 第一个参数: 删除开始的初始位置(下标) 第二个参数: 删除的个数(要删除几项)
arr.splice(i, 1)
}
}
// 删除数据,数组发生改变,重新渲染页面
showArr()
// 数据发生改变,需要和本地存储同步
// 本地存储中只能存储字符串/数字类型,所以要将数组/对象类型转换成字符串存储
localStorage.arr0909 = JSON.stringify(arr)
}
</script>
</body>
</html>
2766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
