HTML+CSS+JavaScript 学生信息表

最新推荐文章于 2024-04-17 22:22:43 发布

森哥呢

最新推荐文章于 2024-04-17 22:22:43 发布

阅读量294

点赞数 9

分类专栏：前端学习文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_46041602/article/details/136262652

版权

前端学习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

简介

登录页+管理用户页+学生信息页。

代码

学生信息表.html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="m-bilibili/css/index1.css" />
  <style>
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈东方大楷 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/ZnFjpGZsoBzD/sj9kVIoKKiP0.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/ZnFjpGZsoBzD/0CWspWtBXRKX.woff") format("woff");
  font-display: swap;
}
body{
  background: center/cover repeat-y url("images/bj.png");
  background-size:100%;
}
.stuInfo{
      display: none;
    }
    .adminLogin{
      display:block;
      font-family:"阿里妈妈东方大楷 Regular" ;
      position:relative;
      margin:15% auto;
      margin-bottom: 5%;
      background-image:url("images/bj.png");
      background-size: 800px;
      width: 800px;
      height: 400px;
      border-radius:10px;
      
    }
    .adminLogin p{
      font-family:"阿里妈妈东方大楷 Regular" ;
      font-size: 2em;
      text-align: center;
    }
    .Login{
      position: relative;
      transform: translate(75%,70%);
      width: 40%;
      height:50%;
      border: solid 1px black;
      background: rgba(208, 178, 236, 0.966);
      border-radius:20px;
    }
    .Login form{
      position:relative;
      transform: translate(23%,60%);
      line-height: 8%;
      color:rgb(226, 222, 217);
    }
    input{
      background: transparent;
    }
    label{
        display: inline-block;
				width:20%;
				height: 10%;
				line-height:1.8em;
				text-align: justify;
				text-align-last: justify;
			}
      #submit,#register,#reset1{
        color: antiquewhite;
        font-size: 1em;
      }
      #submit{
        margin-top: 1.5%;
        margin-left: 10%;
      }
      span{
        border:solid 1px rgb(79, 117, 240);
        border-radius: 8px;
        font-size:x-large;
        margin-right:280px;
        font-weight: lighter;
      }
      .firstTitle{
        padding-right: 330px;
      }
      span:hover{
        color:rgb(109, 109, 236);
        cursor:pointer;
      }

    .userInfo{
      display: none;
    }
    .fillInfo {
    width: 900px;
    margin: 50px auto;
    text-align: center;
  }
  .fillInfo  input, .fillInfo select {
    width: 80px;
    height: 27px;
    outline: none;
    border-radius: 5px;
    border:1px solid #b8daff;
    padding-left: 5px;
    box-sizing: border-box;
    margin-right: 15px;
  }
  .fillInfo button {
    width: 60px;
    height: 27px;
    background-color: #004085;
    outline: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
  }
  .userInfo table {
    margin:0 auto;
    width: 500px;
    border-collapse: collapse;
    color:#004085;
  }
  .userInfo th {
    padding: 10px;
    background: #37e1ff; 
    font-size: 20px;
    font-weight: 400;
  }
  .userInfo th:nth-child(2){
    width:250px;
  }
  .userInfo span{
        border:solid 1px rgb(79, 117, 240);
        border-radius: 8px;
        font-size:x-large;
        margin-right:130px;
        font-weight: lighter;
      }
      .userInfo .firstTitle{
        padding-right: 180px;
      }
      .userInfo span:hover{
        color:rgb(109, 109, 236);
        cursor:pointer;
      }
  </style>
</head>
 
<body>
  <div class="adminLogin">
    <p>学生信息表</p>
    <div class="Login">
    <form>
      <label>用户名</label>
      <input type="text"  id="name" required minlength="3" maxlength="12" size="10"/><br>
      <label>密&nbsp;&nbsp;码</label>
      <input type="password" id="pwd" required minlength="6" maxlength="12" size="10" /><br>
      <label>注册码</label>
      <input type="password" id="registerpwd" required minlength="6" maxlength="12" size="10" /><br>
      <input type="button"  id="submit" onclick="stuAct()"  value="登录" />&thinsp;<input type="button"  id="register" onclick="adminAct()"  value="注册" />&thinsp;<input type="reset" id="reset1">
  </form>
</div>
  </div>

  <div class="userInfo">
    <h1 class="firstTitle"><span>退出</span>新增用户</h1>
    <form class="fillInfo" autocomplete="off">
      用户名：<input type="text" class="userName" name="userName" />
      密码：<input type="password" class="pwd" name="pwd" />
      <input type="button" class="addUser" onclick="addUseract()" value="添加" />
      注册码：<input type="password" class="registerpwd"  />
      <input type="button" class="addUser" onclick="addregisterpwd()" value="添加" />
    </form>
   
    <h1>用户信息</h1>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!--<tr>
          <td>左小疯</td>
          <td>1234567890</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> --> 
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>注册码</th>
        </tr>
      </thead>
      <tbody>
        <td id="fillRegister">888888</td>
      </tbody>
    </table>
  </div>
  <div class="stuInfo">
  <h1 class="firstTitle"><span>退出</span>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>
 
  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
  <script>
    // 获取元素
    const stuInfo=document.querySelector('.stuInfo') 
    const adminLogin=document.querySelector('.adminLogin')
    const Login=document.querySelector('.Login form')
    const adminName=document.querySelector('#name')
    const adminPwd=document.querySelector('#pwd')
    const userinfoExit=document.querySelector('.userInfo .firstTitle span')
    const stuinfoExit=document.querySelector('.stuInfo .firstTitle span')
    const userInfo=document.querySelector('.userInfo')
    const registerpwd=document.querySelector('#registerpwd')
    const arr1 = [{uname:"左小疯",upwd:"123456"}] 

    function adminAct(){
      if(adminName.value!==""&&adminPwd.value!==""&&registerpwd.value===registerShow.innerHTML){// 创建新的对象
        let isRepeatuser=0
        for(let i=0;i<arr1.length;i++){
          if(adminName.value===arr1[i].uname){
            isRepeatuser=1//利用布尔值判断用户和密码是否存在
          }}
          if(isRepeatuser){
            alert('用户名已被占用，请重新输入')
            Login.reset()
          }else{
          const obj = {
          uname:adminName.value,
          upwd:adminPwd.value}
        // console.log(obj)
        // 追加给数组里面
        arr1.push(obj)
        // console.log(arr)
        // 清空表单  重置 
        Login.reset()
        // 调用渲染函数
        render1()}
        }
      else if(registerpwd.value!==registerShow.innerHTML){
        alert('注册码错误')
        registerpwd.value=""
      }
      else{
        alert('用户名和密码不能为空，请重新输入')
      }
    }
    function stuAct(){
      //e.preventDefault()//阻止默认跳转
      if(adminName.value===arr1[0].uname&&adminPwd.value===arr1[0].upwd){
          adminLogin.style.display="none"
          userInfo.style.display="block"
          stuInfo.style.display="none"
      }else{
        let isUser=0
        let isPwd=0
        if(adminName.value!==""&&adminPwd.value!==""){
        for(let i=1;i<arr1.length;i++){
          if(adminName.value===arr1[i].uname){
           isUser=1//利用布尔值判断用户和密码是否存在
          }
          if(adminPwd.value===arr1[i].upwd){
            isPwd=1
          }
        }
        if(isUser&&isPwd){
          adminLogin.style.display="none"
          userInfo.style.display="none"
          stuInfo.style.display="block"}
        else if(!isPwd){
          alert('密码错误')
          adminPwd.value=""}
        else if(!isUser){
          alert('用户名错误')
          Login.reset()}
        else{
          alert('用户和密码错误，请重新输入')
          Login.reset()
        }}
      else{
        alert('用户名和密码不能为空')
        Login.reset()}
    }}
    //退出
    function exit(){
      adminLogin.style.display="block"
          stuInfo.style.display="none"
          userInfo.style.display="none"
      Login.reset()}
    userinfoExit.addEventListener('click',exit)
    stuinfoExit.addEventListener('click',exit)

    //管理用户页面
    const userName = document.querySelector('.userName')
    const userPwd = document.querySelector('.pwd')
    const utbody = document.querySelector('.userInfo tbody')
    // 声明一个空的数组， 增加和删除都是对这个数组进行操作
    // 1. 录入模块
    // 1.1 表单提交事件
    const userInfo1 = document.querySelector('.fillInfo')
    function addUseract(){
      // 这里进行表单验证  如果不通过，直接中断，不需要添加数据
      // 先遍历循环
      if(userName.value!==""&&userPwd.value!==""){
        let isRepeatuser=0
        for(let i=0;i<arr1.length;i++){
          if(userName.value===arr1[i].uname){
            isRepeatuser=1//利用布尔值判断用户和密码是否存在
          }}
          if(isRepeatuser){
            alert('用户名已被占用，请重新输入')
            userName.value=""
            userPwd.value=""
          }else{
            // 创建新的对象
            const obj = {
            uname:userName.value,
            upwd:userPwd.value}
            // console.log(obj)
            // 追加给数组里面
            arr1.push(obj)
            // console.log(arr)
            // 清空表单  重置 
            userInfo1.reset()
            // 调用渲染函数
            render1()}}
        else{
          alert('用户名和密码不能为空')
          userName.value=""
          userPwd.value=""
        }

    }
    render1()
 
    // 2. 渲染函数 因为增加和删除都需要渲染
    function render1() {
      // 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕 
      utbody.innerHTML = ''
      // 遍历arr数组
      for (let i = 0; i < arr1.length; i++) {
        // 生成 tr 
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr1[i].uname}</td>
          <td>${arr1[i].upwd}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        // 追加元素  父元素.appendChild(子元素)
        utbody.appendChild(tr)
      }
    }
    // 3. 删除操作
    // 3.1 事件委托 tbody
    utbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)
        // 删除arr 数组里面对应的数据
        arr1.splice(e.target.dataset.id, 1)
        console.log(arr1)
        // 从新渲染一次
        render1()
      }
    })
   //注册码
   const registerPwd=document.querySelector('.registerpwd')
   const registerShow=document.querySelector('#fillRegister')
   function addregisterpwd(){
    if (registerPwd.value === '') {
          return alert('输入内容不能为空')
        }
      registerShow.innerHTML=registerPwd.value
      registerPwd.value=""
   }

    //用户页面
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('.stuInfo tbody')
    // 获取所有带有name属性的 元素
    const items = document.querySelectorAll('.info [name]')
    // 声明一个空的数组， 增加和删除都是对这个数组进行操作
    const arr = [] 
    // 1. 录入模块
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {
      // 阻止默认行为  不跳转
      e.preventDefault()
      // console.log(11)
 
      // 这里进行表单验证  如果不通过，直接中断，不需要添加数据
      // 先遍历循环
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
      }
      // 创建新的对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      // console.log(obj)
      // 追加给数组里面
      arr.push(obj)
      // console.log(arr)
      // 清空表单  重置 
      this.reset()
      // 调用渲染函数
      render()
    })
 
 
    // 2. 渲染函数 因为增加和删除都需要渲染
    function render() {
      // 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕 
      tbody.innerHTML = ''
      // 遍历arr数组
      for (let i = 0; i < arr.length; i++) {
        // 生成 tr 
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        // 追加元素  父元素.appendChild(子元素)
        tbody.appendChild(tr)
      }
    }
    // 3. 删除操作
    // 3.1 事件委托 tbody
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)
        // 删除arr 数组里面对应的数据
        arr.splice(e.target.dataset.id, 1)
        console.log(arr)
        // 从新渲染一次
        render()
      }
    })
  </script>
</body>
</html>

index1.css

* {
    margin: 0;
    padding: 0;
  }
   
  a {
    text-decoration: none;
    color:#721c24;
  }
  h1 {
    text-align: center;
    color:#333;
    margin: 20px 0;
    
  }
  table {
    margin:0 auto;
    width: 800px;
    border-collapse: collapse;
    color:#004085;
  }
  th {
    padding: 10px;
    background: #cfe5ff;
     
    font-size: 20px;
    font-weight: 400;
  }
  td,th {
    border:1px solid #b8daff;
  }
  td {
    padding:10px;
    color:#666;
    text-align: center;
    font-size: 16px;
  }
  tbody tr {
    background: #fff;
  }
  tbody tr:hover {
    background: #e1ecf8;
  }
  .info {
    width: 900px;
    margin: 50px auto;
    text-align: center;
  }
  .info  input, .info select {
    width: 80px;
    height: 27px;
    outline: none;
    border-radius: 5px;
    border:1px solid #b8daff;
    padding-left: 5px;
    box-sizing: border-box;
    margin-right: 15px;
  }
  .info button {
    width: 60px;
    height: 27px;
    background-color: #004085;
    outline: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
  }
  .info .age {
    width: 50px;
  }

bj.png(有点丑，可替换)

在这里插入图片描述

重要代码

实现登录验证及相关错误提示

       let isUser=0
       let isPwd=0
        if(adminName.value!==""&&adminPwd.value!==""){
        for(let i=1;i<arr1.length;i++){
          if(adminName.value===arr1[i].uname){
           isUser=1//利用布尔值判断用户和密码是否存在
          }
          if(adminPwd.value===arr1[i].upwd){
            isPwd=1
          }
        }
        if(isUser&&isPwd){
          adminLogin.style.display="none"
          userInfo.style.display="none"
          stuInfo.style.display="block"}
        else if(!isPwd){
          alert('密码错误')
          adminPwd.value=""}
        else if(!isUser){
          alert('用户名错误')
          Login.reset()}
        else{
          alert('用户和密码错误，请重新输入')
          Login.reset()
        }}
      else{
        alert('用户名和密码不能为空')
        Login.reset()}
    }}