js+html+css实现的学生管理系统

最新推荐文章于 2024-05-23 00:23:34 发布
最新推荐文章于 2024-05-23 00:23:34 发布
阅读量9.9k 收藏 224
点赞数 32
分类专栏： javascript学习 文章标签： html web js spring vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45633353/article/details/115339662
版权

我的一些springboot+vue的项目地址，欢迎star

水果销售系统后端gitee地址:…

水果销售系统前端gitee地址：…

课堂派前端项目地址

课堂派后端端项目地址

简介

这个html+css+js的学生管理系统，相对简单，由于没有连接数据库，所以每次打开页面需要重新生成数据，只是把注册的放在代码里面的数组中，并没有持久化存储。相对来说纯javascript的代码还是有些意思。

界面

在这里插入图片描述
在这里插入图片描述

登录面板的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>
<body>
<img src="images/2.jpg" alt="">
<!--登录面板-->
<div class="login-panel panel">
    <h1 class="panel-header ">
        学生管理系统
    </h1>
    <div class="panel-middle">
        <form action="#" class="form">
            <table >
                <tr>
                    <td class="td_left">用户名</td>
                    <td class="td_right"><input type="text" name="username" id="login_username" placeholder="请输入用户名"><i class="iconfont icon-ren-"></i></td>
                </tr>
                <tr>
                    <td class="td_left">密码</td>
                    <td class="td_right"><input type="password" name="password" id="login_password"  placeholder="请输入密码"><i class="iconfont icon-suo"></i></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" name="submit" class="submit-btn panel-btn" value="登录"></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="panel-footer">
        <span class="toRegister"><a href="#">注册</a></span>
        ||
        <span class="forgetPassword"><a href="#">忘记密码</a></span>
    </div>
</div>
<!--注册面板-->
<div class="register-panel panel">
    <h1 class="panel-header ">欢迎注册</h1>
    <div class="panel-middle register-middle">
        <form action="#" class="form">
            <table >
                <tr>
                    <td class="td_left">用户名</td>
                    <td class="td_right"><input type="text" name="username" id="register_username" placeholder="请输入6-12位用户名"></td>
                    <td><span id="s_username" class="error"></span></td>
                </tr>
                <tr>
                    <td class="td_left">密码</td>
                    <td class="td_right"><input type="password" name="password" id="register_password1" placeholder="请输入密码"></td>
                    <td><span id="s_password1" class="error"></span></td>
                </tr>
                <tr>
                    <td class="td_left">确认密码</td>
                    <td class="td_right"><input type="password" name="password" id="register_password2"  placeholder="请再次输入密码"></td>
                    <td><span id="s_password2" class="error"></span></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" name="submit" class="register-btn panel-btn" value="注册"></td>
                    <td><span id="s_btn" class="error1"></span></td>
                </tr>

            </table>
        </form>
    </div>
    <div class="register-footer">
        <a href="#">返回登录</a>
    </div>

</div>
<!--修改密码面板-->
<div class="updatePassword-panel panel">
    <h1 class="panel-header ">重置密码</h1>
    <div class="panel-middle updatePassword-middle">
        <form action="#" class="form">
            <table >
                <tr>
                    <td class="td_left">用户名</td>
                    <td class="td_right"><input type="text" name="username" id="update_username" placeholder="请输入用户名"></td>
                    <td><span id="s_updateName" class="error"></span></td>
                </tr>
                <tr>
                    <td class="td_left">密码</td>
                    <td class="td_right"><input type="password" name="password" id="update_password1" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td class="td_left">确认密码</td>
                    <td class="td_right"><input type="password" name="password" id="update_password2"  placeholder="请再次输入密码"></td>
                    <td><span id="s_UpdatePassword" class="error"></span></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" name="submit" class="update-btn panel-btn" value="确定"></td>
                    <td><span id="s_update" class="error1"></span></td>
                </tr>
            </table>
        </form>

    </div>
    <div class="update-footer">
        <a href="#">返回登录</a>
    </div>

</div>


</body>
</html>

主页面的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
    <script src="js/student.js"></script>
    <link rel="stylesheet" href="css/student.css">
</head>
<body>
<div class="main">
    <div class="header">
       <div class="header-first">
           <div class="left-line header-line"></div>
           <h1>学生管理系统</h1>
           <div class="right-line header-line"></div>
       </div>
        <div class="header-bottom">
            <button class="green-button" onclick="add()">新增</button>
            <button class="red-button" onclick="remove()">删除</button>
        </div>
    </div>
    <div class="table">
        <table id="form" cellspacing="0">

        </table>
    </div>
    <div class="footer">
        <span class="numInfo">sjjj</span>
        <input type="button" class="green-button" onclick="prevPage()" value="上一页">
        <input type="button" class="red-button" onclick="nextPage()" value="下一页">
    </div>
</div>
<div class="hiddenPage"></div>
<div class="edit">
    <div class="head-title">查看学生信息</div>
    <ul>
        <li><label for="">学号</label><input type="text" class="edit-info"></li>
        <li><label for="">姓名</label><input type="text" class="edit-info"></li>
        <li><label for="">学院</label><input type="text" class="edit-info"></li>
        <li><label for="">专业</label><input type="text" class="edit-info"></li>
        <li><label for="">年级</label><input type="text" class="edit-info"></li>
        <li><label for="">班级</label><input type="text" class="edit-info"></li>
        <li><label for="">年龄</label><input type="text" class="edit-info"></li>
    </ul>
    <div class="edit-btn">
        <button class="edit-submit" ></button>
        <button class="edit-cancel" onclick="cancel()">取消</button>
    </div>
</div>
</body>
</html>

登录页面的css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body>img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -999;
}
.panel{
    width: 300px;
    height: 400px;
    border: 1px solid red;
    margin: 100px auto;
   border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
}
.login-panel{
    /*display: none;*/
}
.panel-header{
    font-size: 30px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: deepskyblue;
   border-bottom: #e82c07 1px solid;

}
.panel-middle{
    height: 300px;
    padding: 20px 10px 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid orangered;
}
.panel-middle>form tr {
    font-size: 20px;
    color: orangered;
    height: 60px;
    text-align: center;
}
.login-panel .panel-middle>form .td_right{
    padding-left: 30px;
    position: relative;
}
.td_right>i{
    position: absolute;
    left:30px;top: 50%;
    transform: translateY(-50%);
}
.panel-middle>form .td_right>input{
    width: 120px;
    height: 30px;
    border: none;
    background: none;
    outline: none;
    /*border-radius: 10px;*/
    border-bottom: 1px solid red;
    /*margin-left: 10px;*/
    color: orange;
    /*background: rgba(255,255,255,.5);*/
}

.login-panel input{

    padding-left: 20px;
}
.panel-middle>form .panel-btn{
    margin-top: 30px;
    width: 120px;
    height: 40px;
    font-size: 30px;
    background: none;
    border-radius: 15px;
    color: orangered;
    border: 2px orangered solid;
}
.login-panel>.panel-footer{
    /*background: #31c27c;*/
    height: 40px;
    padding: 0 20px;
    text-align: right;
    line-height: 40px;
    font-size: 20px;
    color: orangered;
}
 a{
    text-decoration: none;
    color: orangered;
}
.register-panel{
    display: none;
}

.register-footer{
    height: 50px;
    text-align: right;
    line-height: 50px;
    padding-right: 20px;
}
.updatePassword-panel{
    display: none;
}

.update-footer{
    height: 30px;
    text-align: right;
    line-height: 30px;
    padding-right: 20px;
}
.error{
    color: red;
    font-size: 10px;
}
.error1{
    color: purple;
    font-size: 10px;
    font-weight: bold;
}

主页面的css

*{
    margin: 0;
    padding: 0;
}
body{
    color: #000;
}
.main{
    width: 1200px;
   margin: 0 auto;
   background-color: #f0ece9;
}
.main .header-first{
    display: flex;
    justify-content: space-between;
}
.main>.header{
    height: 80px;
    /*background-color: orangered;*/
}
.header .header-line{
    width: 400px;
    height: 2px;
    margin: 20px 40px;
    background-color: #c8a98c;
}
.header h1{
    color: #a0a1a1;
}
.header-bottom{
    margin-left: 20px;
    margin-bottom: 10px;
}
.green-button{
    color: white;
    background-color: #5cb85c;
    width: 75px;
    height: 30px;
    border: 1px solid black;
}
.red-button{
    color: white;
    background-color: #d9534f;
    width: 75px;
    height: 30px;
    border: 1px solid black;
}
.table{
    width: 1200px;
    height: 400px;
    /*background-color:red;*/
    margin-top: 9px;
}
.footer{
    height: 60px;
    text-align: right;
    position: relative;
}
.footer>span{
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}
.footer>input{
    margin-right: 10px;
    margin-top: 30px;
}
.hiddenPage{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}
.edit{
    width: 450px;
    height: 400px;
    /*background: url("../images/timg.jfif") no-repeat ;*/
    /*background-size: cover;*/
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: #ccc;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
    border: 1px solid black;
    display: none;
}
.edit>.head-title{
    background: #555555;
    width: 100%;
    height: 50px;
    color: white;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
}
.edit>ul{
    margin-top: 30px;
    text-align: center;
    list-style: none;
    /*background: orangered;*/
}
.edit>ul>li{
    color: #000;
    height: 40px;
}
.edit>ul>li>label{
    margin-right: 20px;
}
.edit>ul>li>input{
    width: 150px;
    background: none;
    border: none;
    border-bottom: 1px solid green;
}
.edit-btn{
    text-align: right;
}
.edit-btn button{
    width: 60px;
    height: 30px;
    margin-right: 30px;
    border: 1px solid #ffffff;
    border-radius: 5px;
}
.edit-btn button:nth-child(1){
    background: green;
}

登录页面的js

window.onload = function () {
    //定义用户类
    class  User{
        constructor(username,password) {
            this.username = username;
            this.password = password;
        }
    }
    let userInfo =[];//定义数组保存用户的用户名和密码信息
    let oLoginPanel = document.querySelector(".login-panel");//登录面板
    let oRegisterPanel = document.querySelector(".register-panel") ;//注册面板
    let oSubmitBtn = document.querySelector(".submit-btn");//登录按钮
    let oRegister = document.querySelector(".toRegister");//去注册链接
    let oRegisterBack = document.querySelector(".register-footer>a");//注册页面的返回登录链接
    let oForgetPassword = document.querySelector(".forgetPassword");//登录面板的忘记密码链接
    let oUpdatePanel = document.querySelector(".updatePassword-panel");//改密面板
     let oUpdateBtn = document.querySelector(".update-btn");//改密页面的确定按钮
    let oUpdateBack = document.querySelector(".update-footer");//改密页面的返回登录链接
    let oRegisterSuccessBtn = document.querySelector(".register-btn");//注册按钮
    //登录按钮的点击事件
    oSubmitBtn.onclick = function (){
        let login_username = document.querySelector("#login_username").value;
        let login_password = document.getElementById("login_password").value;
      if (isInList2(login_username, login_password)) {
          window.location.href = "http://localhost:63342/h5jsCode/src/javascriptCode/%E5%AD%A6%E7%94%9F%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/student.html"
      }else{
          alert("用户名不存在");
      }
      return false;
    }
    //判断是否在数组中的方法
    function isInList2(name,password){

        for (let i = 0;i < userInfo.length;i++){
            if (userInfo[i].username === name && userInfo[i].password === password){
                return true;
            }
        }
        return false;
    }
    //去注册页面的点击事件
    oRegister.onclick = function () {
        oLoginPanel.style.display = 'none';
        oRegisterPanel.style.display = "block";
    }
    // 注册页面的返回登录链接的点击事件
    oRegisterBack.onclick = function () {
        oRegisterPanel.style.display = "none";
        oLoginPanel.style.display = "block";
    }
    //为注册用户名和密码绑定离焦事件
    document.getElementById("register_username").onblur = checkUsername;
    document.getElementById("register_password1").onblur = checkPassword;
    document.getElementById("register_password2").onblur = checkPassword2;
    //注册页面检查用户注册的方法
    function checkUsername(){
        let username = document.getElementById("register_username").value;
        //正则判断
        let reg_username = /^\w{6,12}$/;
        let flag = reg_username.test(username);
        let s_username = document.getElementById("s_username");
        if (flag){
            //若正确格式显示对勾
            s_username.innerHTML =  "<img style='width: 35px;height: 25px' src='images/gou.png'/>";
        }
        else{
            //不正确就报错
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }
    function checkPassword() {
        let password1 = document.getElementById("register_password1").value;
        let reg_password = /^\w{6,12}$/;

        let flag = reg_password.test(password1);
        let s_password1 = document.getElementById("s_password1");
        if (flag){
            //提示绿色对
            s_password1.innerHTML =  "<img width='35' height='25' src='images/gou.png'/>";
        }
        else{
            s_password1.innerHTML = "密码格式有误";
        }
        return flag;
    }
    function checkPassword2(){
       let  password1 = document.getElementById("register_password1").value;
        let password2 = document.getElementById("register_password2").value;
        let s_password2 = document.getElementById("s_password2");
        if (password1 === password2){
            //提示绿色对
            s_password2.innerHTML =  "<img width='35' height='25' src='images/gou.png'/>";
        }
        else{
            s_password2.innerHTML = "输入不一样";
        }
        return password1===password2;

    }
    oRegisterSuccessBtn.onclick = function (){
        let s_btn = document.getElementById("s_btn");
          if( checkUsername() && checkPassword() && checkPassword2()){
              //将用户放入数组
              let password = document.getElementById("register_password1").value;
              let username = document.getElementById("register_username").value;
              let user = new User(username,password);
              userInfo.push(user);
              //提示注册成功
              s_btn.innerHTML = "注册成功";
          }
          else{
              s_btn.innerHTML = "注册失败";
          }
        return false;
    }
    // 登录面板的忘记密码链接的点击事件
    oForgetPassword.onclick = function () {
        oLoginPanel.style.display = 'none';
        oUpdatePanel.style.display = "block";
    }

    //改密离焦事件
    document.getElementById("update_username").onblur = checkUpdateUsername;
    document.getElementById("update_password2").onblur = checkPassword3;
    function checkUpdateUsername() {
        let username = document.getElementById("update_username").value;
        if (!isInLIst(username)){
            let s_updateName = document.querySelector("#s_updateName");
            s_updateName.innerHTML = "用户名不存在";
            return false;
        }else {
            return true;
        }

    }
    //判断是否在数组里面方法
    function isInLIst(username) {

        for (let i = 0;i < userInfo.length;i++){
            if (userInfo[i].username == username){
                return true;
            }
        }
        return false;
    }
    //检验重置的密码
    function checkPassword3(){
        let updatePassword = document.getElementById("update_password1").value;
        let updatePassword2 = document.getElementById("update_password2").value;
        let s_UpdatePassword = document.getElementById('s_UpdatePassword');
        if (updatePassword === updatePassword2){
            s_UpdatePassword.innerHTML = '正确';
            return true;
        }else{
            s_UpdatePassword.innerHTML = '输入错误';
            return false;
        }
    }
//改密页面确定按钮的点击事件
    oUpdateBtn.onclick = function(){
        let s_update = document.getElementById("s_update");
        if (checkPassword3()&&checkUpdateUsername()){
            let username = document.getElementById("update_username").value;
            for (let i = 0; i < userInfo.length; i++) {
                if (username==userInfo[i].username){
                    userInfo[i].password =  document.getElementById("register_password2").value;

                    s_update.innerHTML = "改密成功";
                }
            }
        }
        else {
            s_update.innerHTML = "改密失败";
        }
        return false;
    }
    // 改密页面返回登录事件
    oUpdateBack.onclick = function () {
        oUpdatePanel.style.display = 'none';
        oLoginPanel.style.display = "block";
    }

}

主页面的js

window.onload = function () {
    render();
}
class CreateStudent {
    constructor(id,name,college,major,grade,clas,age) {
        this.id = id;
        this.name = name;
        this.college = college;
        this.major = major;
        this.grade = grade;
        this.clas = clas;
        this.age = age;
    }

}
let stu1 = new CreateStudent("11923020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
let stu2 = new CreateStudent("11923020310","郭哈哈","人工智能学院","软件工程","大二","19", "1");
let stu3 = new CreateStudent("11923020310","郭嘻嘻","人工智能学院","软件工程","大二","19", "1");
let stu4 = new CreateStudent("11923020310","郭喵喵","人工智能学院","软件工程","大二","19", "1");
let stu5 = new CreateStudent("11923020310","郭爸爸","人工智能学院","软件工程","大二","19", "1");
let stu6 = new CreateStudent("11923020310","郭花花","人工智能学院","软件工程","大二","19", "1");
let stu7 = new CreateStudent("11923020310","郭草草","人工智能学院","软件工程","大二","29", "1");
let stu8 = new CreateStudent("11923020310","郭嘻哈","人工智能学院","软件工程","大二","119", "1");
let stu9 = new CreateStudent("11923020310","郭麻麻","人工智能学院","软件工程","大二","19", "1");
let stu10 = new CreateStudent("19823020310","郭...","人工智能学院","软件工程","大二","19", "1");
let stu11 = new CreateStudent("19823020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
let stu12 = new CreateStudent("19823020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
let students =[stu1, stu2,stu3, stu4,stu5,stu6,stu7,stu8,stu9,stu10,stu11,stu12];
//常用名词
let list = ["<input type='checkbox' id='check-box' οnclick='checkAll(this)'>",
            "序号","学号","姓名","学院","专业","年级","班级","年龄","操作"];
let editInfo = document.getElementsByClassName("edit-info");
let currentPage = 1;

function render() {
    //拿到form
    let oTable = document.getElementById("form");
    //清空表
    oTable.innerHTML = "";
    //生成头部
    let oTr = document.createElement("tr");
    //
    for (let i = 0;i<list.length;i++){
        let oTd = document.createElement("td");
        if (i==0 || i==1){
            oTd.style.width = "45px";
        }
        else {
            oTd.style.width = "175px";
        }
        oTd.style.textAlign = "center";
        oTd.innerHTML = list[i];
        oTr.appendChild(oTd);
    }
    //设置oTr样式并加入table中；
    oTr.style.height = "54px";
    oTr.style.fontSize = "bold";
    oTr.style.backgroundColor = "#dadee1";
    oTable.appendChild(oTr);
    //页码

    let pageInfo = document.querySelector(".numInfo");
    pageInfo.innerHTML = `共${students.length}条信息，共${Math.ceil(students.length/10)}页，目前为${currentPage}页`;
    //创建学生条目
    for (let i = (currentPage-1) * 10 ; i < students.length && i<(currentPage*10);i++){
        //创建每一行
        let oBodyTr = document.createElement("tr");
        oBodyTr.style.textAlign = "center";
        oBodyTr.style.height = "35px";
        //颜色
        if (i % 2 == 0) {
            oBodyTr.style.backgroundColor = "#ffffff";
        } else {
            oBodyTr.style.backgroundColor = "#eef1f8";
        }
        //创建表格
        for (let j = 0; j < 10; j++) {
              oBodyTr.insertCell(j);
        }
        oBodyTr.childNodes[0].innerHTML = "<input type='checkbox' class='checkBoxes' name='boxSituation'/>";
        oBodyTr.childNodes[1].innerHTML = `${i+1}`;
        oBodyTr.childNodes[2].innerHTML = students[i].id;
        oBodyTr.childNodes[3].innerHTML = students[i].name;
        oBodyTr.childNodes[4].innerHTML = students[i].college;
        oBodyTr.childNodes[5].innerHTML = students[i].major;
        oBodyTr.childNodes[6].innerHTML = students[i].grade;
        oBodyTr.childNodes[7].innerHTML = students[i].clas;
        oBodyTr.childNodes[8].innerHTML = students[i].age;
        oBodyTr.childNodes[9].innerHTML = "<a href='#' style='color: red' οnclick='watch("+ i +")'> 查看</a> <a href='#' style='color: red' οnclick='update("+i+")'>修改</a> "

        oTable.appendChild(oBodyTr);
    }


}
function add() {
    //调用show方法
    show();
    changHeader(0);
    changeBtn(0);

}
//显示方法
function show() {
    document.querySelector(".hiddenPage").style.display = "block";
    document.querySelector(".edit").style.display = "block";
}
//隐藏方法
function hidden() {
    document.querySelector(".hiddenPage").style.display = "none";
    document.querySelector(".edit").style.display = "none";
}
//更改弹出框文字的方法
function changHeader(i) {
    let headTitle = document.querySelector(".head-title");
    if (i==0){
        let headTitle = document.querySelector(".head-title");
        headTitle.innerHTML = "新增学生信息";
    }
    else if (i==1){
        headTitle.innerHTML = "查看学生信息";
    }
    else if (i==2){
        headTitle.innerHTML = "修改学生信息";
    }
}
//更改底部按钮的方法
function changeBtn(i,index) {
    let leftBtn = document.querySelector(".edit-submit");
    if (i==0){
        leftBtn.innerHTML = "提交";
        leftBtn.onclick = submit;
    }
    else if (i==1){
        leftBtn.style.display = "none";
        leftBtn.disabled = true;
    }
    else if(i==2){
        leftBtn.style.display = "inline-block";
        leftBtn.disabled = false;
        leftBtn.innerHTML = "保存";
        leftBtn.onclick = function () {
            if (!confirm("确定保存吗？")){
                return;
            }
            else{
                //更换数据
                students[index].id = editInfo[0].value;
                students[index].name = editInfo[1].value;
                students[index].college = editInfo[2].value;
                students[index].major = editInfo[3].value ;
                students[index].grade = editInfo[4].value;
                students[index].clas = editInfo[5].value;
                students[index].age = editInfo[6].value;
                //隐藏
                hidden();
                render();
            }

        }

    }
}

//新增按钮提交方法
function submit() {
    if (correct()){
        //将表单里信息创建对象并添加到数组里
       let newStudent = new  CreateStudent(editInfo[0].value,editInfo[1].value,editInfo[2].value,editInfo[3].value,editInfo[4].value,editInfo[5].value,editInfo[6].value);
        students.push(newStudent);
       alert("新增成功");
       //隐藏
        hidden();
        //重新创建表
        render();
    }else{
        alert('新增失败');
    }
    //清空
    clearEdit();

}
//表单验证方法
function correct() {
   //验证空
    for (let i = 0;i < editInfo.length;i++){
        if (editInfo[i].value == ""){
            alert(list[i+2] + "不能为空");
            return false;
        }
        //验证学号
        let idCheck = /^\d{11}$/;
        if (!idCheck.test(editInfo[0].value)){
            alert("学号必须十一位数字");
            return false;
        }

        //验证年龄
        let ageCheck =/^\d{1,2}$/
        if(!ageCheck.test(editInfo[6].value)){
            alert("年龄必须两位数");
            return false;
        }
    }
    return true;
}
//清空表的方法
function clearEdit() {
    for (let i = 0; i < editInfo.length; i++) {
        editInfo[i].value = "";
    }
}
//取消按钮
function cancel() {
    hidden();
    clearEdit();
    for (let i = 0; i < editInfo.length; i++) {
        editInfo[i].disabled = false;
    }
}
//上一页
function prevPage() {
    if (currentPage <=1){
        alert("当前是第一页");
    }else{
        currentPage--;
        render();
    }
}
//下一页
function nextPage() {
    if(currentPage >= Math.ceil(students.length/10)){
        alert("当前最后一页");
    }
    else {
        currentPage++;
        render();
    }
}
//插入数据的方法
function insertInfo(i) {

    editInfo[0].value = students[i].id;
    editInfo[1].value = students[i].name;
    editInfo[2].value = students[i].college;
    editInfo[3].value = students[i].major;
    editInfo[4].value = students[i].grade;
    editInfo[5].value = students[i].clas;
    editInfo[6].value = students[i].age;
}
//查看方法
function watch(i) {
    show();
    changHeader(1);
    insertInfo(i);
    changeBtn(1);
    //修改属性
    for (let j = 0; j < editInfo.length; j++) {
        editInfo[j].disabled = true;
    }
}
//修改方法
function update(i) {
    show();
    changHeader(2);
    insertInfo(i);
    changeBtn(2,i);
}
//全选按钮
function checkAll(o) {
    let checkBoxs = document.querySelectorAll(".checkBoxes");
    for (let i = 0; i < checkBoxs.length; i++) {
        checkBoxs[i].checked = o.checked;
    }

}
//删除方法
function remove() {
    let checkAll = document.getElementById("check-box");
    let checkBoxs = document.querySelectorAll(".checkBoxes");
    console.log(checkBoxs)
    if (!isChecked()){
        confirm("所选不能为空！");
        return;
    }else{
        //删除当前页面
        if(checkAll.checked){
            let flag = confirm("真的要全部删掉吗？");
            if (!flag){
                return;
            }
            else{
                //删除学生
                students.splice((currentPage-1)*10,10);
            }
            render();
            return;
        }

        //删除单个
        for (let i = 0; i < checkBoxs.length; i++) {
            if (checkBoxs[i].checked){
                let flag = confirm("真的要删掉吗？");
                if (!flag){
                    return;
                }
                else{
                    students.splice((currentPage-1)*10+i,1);
                }
            }
        }
        render();
    }

}
//
function isChecked() {
    let checkBoxs = document.querySelectorAll(".checkBoxes");
    for (let i = 0; i < checkBoxs.length; i++){
        if (checkBoxs[i].checked){
            return true;
        }
    }
    return false;

}
毕业有1000个offer
关注
  • 32
    点赞
  • 踩
  • 224
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
html+css+js 学生信息管理系统
jinxiaofei8的博客
05-23 1万+
利用Web前端开发技术完成管理系统后台管理功能，主要包括用户登录、系统主界面
【计算机毕业设计】基于HTML+CSS+JavaScript学生宿舍管理系统
HTML网页设计
08-04 1957
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
学生信息管理系统(html + js + css)
07-01
实现对学生信息的增、删、改、查。主要对html、css、js方面知识的运用。
LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统
10-04
使用HTML+CSS+Javascript(ES6) / jQuery以及LocalStorage实现简易的学生管理系统，支持学生信息（学号、姓名、专业、班级）的CRUD
【期末网页设计】基于HTML学生信息管理系统网页项目的设计与实现
最新发布
网页设计与制作 | HTML+CSS+JS
05-23 846
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
HTML+JavaScript+CSS的人员信息管理系统，大厂面试必备
m0_61549353的博客
04-01 343
v.编号v.姓名v.性别v.年龄v.籍贯删除更新
HTML+CSS的后台管理系统
Sweethonor的博客
11-16 1443
原生态构架的后台管理系统
HTML+CSS+JQuery 实现学生信息管理系统
flow
11-30 1万+
用数组来存储所有学生对象的信息，实现了双向更新，初始时（数组内的对象信息“填充界面”），后面的界面操作可以更新数组内对象的信息（数量和本身数据域信息）。 优点：JQuery代码处理的许多细节较好。 使用HTML5的pattern+正则表达式，实现表单验证以及相应提示。 缺点：后台删除学生对象的信息代码处理效率较低（“假”删除：移动学生对象索引的位置+变换数组长度）。 CSS部分——界面的缩放存在问题。（没打算走前端/暂时懒得修改）。 效果图如下： 没有删去写代码过程中做改进之前的代码，.
【html网页设计】HTML+CSS+JavaScript通用的后台管理系统ui框架模板
12-18 3311
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓
HTML+JS+CSS实现学生信息管理系统
热门推荐
你的大数据学长
02-21 4万+
HTML+JS+CSS实现学生信息管理系统效果页面增删改查翻页代码难点难点1难点2难点3难点4结语 效果 话不多说，直接看效果，本次代码较为复杂，希望大家可以耐心阅读，不懂的可以评论或者邮箱联系我（1079349989@qq.com）。 完整代码也可以在我的GitHub中找到，GitHub链接在此 页面 增 点击新增按钮，弹出如下 新增学生信息 输入框架，输入内容，点击提交，回到初始页面，并将内...
学生信息管理系统js网页版（初学者）
12-18
学生信息管理系统网页版代码，包括查询删除等功能，有网页提示和验证
高校选课管理系统前端代码.zip
05-24
高校选课管理系统的前端页面，使用vue + element ui 进行设计。该设计通过2021年本科生毕业设计，可作为课题作业，毕业设计等使用。 包含选课，退课，成绩查看，成绩录入，新增课程，用户管理，意见反馈等功能 如果你遇到了问题，可以随时私信我，我会在周一至周六，进行回复
学生信息管理系统模板 HTML模板 整套模板
01-03
学生信息管理系统模板，全套模板，DIV+CSS布局，清新简约。有个人中心、我的信息、班级信息、短信息、学院通知、我的异议、教务中心、我的报考、我的成绩、我的书籍、学习中心、资料下载、学习历程、财务中心、我的财务、教学系统等系统功能菜单。
web前端html+css+js实现学生信息管理系统
11-13
【标题】：“web前端html+css+js实现学生信息管理系统” 在web开发领域，构建一个学生信息管理系统是一项常见的任务，它能帮助教育工作者有效管理学生数据。本项目以HTML、CSS和JavaScript为核心技术，实现了一个...
用 html+css+bootstrap+Nodejs实现学生管理系统
10-15
在这个项目中，CSS被用来设置颜色、字体、布局等视觉效果，使得学生管理系统的界面美观且符合人机交互原则。Bootstrap框架的引入进一步增强了CSS的功能，提供了预设的响应式设计和组件，让开发者能够快速构建跨平台...
HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统模板
qq_38518191的博客
03-20 473
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
HTML期末学生大作业 基于HTML+CSS+JavaScript通用的后台管理系统ui框架模板
专注于dreamweaver网页设计制作
12-06 345
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
使用html css node 写一个学生信息管理系统
06-03
好的，我可以为您提供一些基本的思路和步骤： 1. 数据库设计：您需要设计一个数据库来存储学生信息，包括学生的姓名、年龄、性别、学号等信息。您可以选择使用MySQL或MongoDB等数据库。 2. 后端开发：使用Node.js编写后端接口，包括增加、删除、修改和查询学生信息的API。您可以使用Express框架来简化开发过程。 3. 前端开发：使用HTML和CSS来设计前端页面，包括学生信息的展示、添加、编辑和删除等功能。您可以使用Bootstrap等前端框架来简化开发过程。 4. 前后端交互：将前端页面和后端API进行连接，通过AJAX或fetch等方式来实现数据的交互和展示。 5. 部署上线：将您的应用部署到服务器上，并通过域名或IP地址让用户可以访问您的应用。 以上是一个基本的思路，具体的实现过程可能会有所不同。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值