帮帮忙，谢啦，用js把它做出来

Question

这个用js咋做的呀！我敲打的时候，老是出错，这个应该咋做呀，用JS： 求解。

Answer 1

学生头像:

        <div>
            <label>
                姓名:<input type="text" id="username"/>
            </label>
        </div>
        
        <div>
            性别:
            <label>
                <input type="radio" name="sex" value="0" checked/> 男
                <input type="radio" name="sex" value="1"/> 女
            </label>
        </div>
        
        <div>
            年龄:<input type="number" id="age"/>
        </div>
        
        <div>
            <button id="add">添加</button>
        </div>
        
        <table border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>头像</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!--<tr>
                    <td>1</td>
                    <td><img src="img/1.jpeg"/></td>
                    <td>萨达</td>
                    <td>男</td>
                    <td>21</td>
                    <td>2021年9月9日14:14:26</td>
                    <td><button>删除</button></td>
                </tr>-->
            </tbody>
        </table>
        <span class="pp">
            暂无数据
        </span>
        
    </div>
    
    <script type="text/javascript">
        //获取Dom
        var imgs = document.querySelectorAll("#d1>img");
        var username = document.querySelector("#username");
        var sexs = document.querySelectorAll("input[type='radio']")
        var age = document.querySelector("#age");
        var add = document.querySelector("#add");
        var tbody = document.querySelector("tbody");
        var pp = document.querySelector(".pp");
        var table = document.querySelector("table");
        //本地存储
        if(localStorage.arr99){
            var arr = JSON.parse(localStorage.arr99);
        }else{
            var arr = [];
            localStorage.arr99 = JSON.stringify([]);
        }
        show(arr);
        //图片切换
        var imgSrc = '';
        
        for(var i=0; i<imgs.length; i++){
            imgs[i].onclick = function(){
                
                for(var i=0; i<imgs.length; i++){
                    imgs[i].style.border = "";
                }
                this.style.border = "2px solid black"
                imgSrc = this.getAttribute("src");
            }
        }
        
        //获取性别值
        function getSex(){
            for(var i=0; i<sexs.length; i++){
                if(sexs[i].checked){
                    return sexs[i].value;
                }
            }
        }
        
        //渲染性别值
        function SexFn(value){
            var arr1 = ["男","女"];
            return arr1[value];
        }
        
        //时间渲染
        function getTime(){
            var d = new Date();
            return d.getFullYear()+"-"+
                numFn(d.getMonth()+1)+"-"+
                numFn(d.getDate())+" "+
                numFn(d.getHours())+":"+
                numFn(d.getMinutes())+":"+
                numFn(d.getSeconds())
        }
        //补零
        function numFn(num){
            return num>9 ? num : "0"+num;
        }
        //添加
        add.onclick = function(){
            if(!username.value){
                alert("请输入姓名")
                return;
            }else if(!age.value){
                alert("请输入年龄")
                return;
            }else if(imgSrc == ''){
                alert("请选择头像");
                username.value = age.value = "";
                return;
            }
            arr.push({
                img : imgSrc,
                username : username.value,
                sex : getSex(),
                age : age.value,
                time : getTime(),
                id : new Date().getTime() 
            })
            for(var i=0; i<imgs.length; i++){
                imgs[i].style.border = "";
            }
            imgSrc = '';
            sexs[0].checked = true;
            username.value = age.value = "";
            localStorage.arr99 = JSON.stringify(arr);
            show(arr);
        }
        
        //渲染
        function show(arr){
            if(arr.length == 0){
                pp.style.display = "block";
                table.style.display = "none";
            }else{
                pp.style.display = "none";
                table.style.display = "table";
            }
            tbody.innerHTML = '';
            for(var i=0; i<arr.length; i++){
                tbody.innerHTML +=`
                    <tr>
                    <td>${i+1}</td>
                    <td><img src="${arr[i].img}"/></td>
                    <td>${arr[i].username}</td>
                    <td>${SexFn(arr[i].sex)}</td>
                    <td>${arr[i].age}</td>
                    <td>${arr[i].time}</td>
                    <td><button onclick = "delFn(${arr[i].id})">删除</button></td>
                </tr>
                `;
            }
        }
        
        //删除
        function delFn(id){
            for(var i=0; i<arr.length; i++){
                if(arr[i].id == id){
                    arr.splice(i,1);
                }
            }
            localStorage.arr99 = JSON.stringify(arr);
            show(arr);
        }
    </script>
</body>