js :考试测试题

 效果图如上;

代码如下:

<!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>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值