本人是女院的一名学生，最近做一个期末设计 纯html+css+js 期间用了点jquery 做了简单的5个页面 存储信息用的本地存储 可根据需要自行修改html放在外面 css、js、img放在文件夹
运行效果：
登录页：
html：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="content">
<div id="content-left">
<p>Hi! 你好！</p>
<p>欢迎进入SDWU学生信息管理系统</p>
<div id="content-left-img">
<img src="img/ny.png" alt="图像无法显示">
</div>
<div id="content-left-img2">
<img src="img/bypic.png" alt="图像无法显示">
</div>
</div>
<div id="content-right">
<div id="loginsystem">登录系统</div>
<form action="">
<p>用户名</p>
<input type="text" id="username" required>
<p>密码</p>
<input type="password" name="password" id="password" required><br />
<div id="but">
<button id="register" type="button">注册</button>
<button id="loginsubmit" type="button">登录</button>
</div>
</form>
<a target="_blank" >如有问题跟我联系
<img border="0" src="http://wpa.qq.com/pa?p=2:2603111637:51" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
css：
[HTML] 纯文本查看 复制代码 body{margin: 0;padding: 0;}
#content{
width: 80%;
margin-left: 10%;
height: 600px;
margin-top: 50px;
display: flex;
}
#content-left{
width: 50%;
height: 90%;
padding-top: 60px;
background-color: rgb(160, 40, 49);
}
#content-right{
width: 50%;
height: 100%;
position: relative;
background-color: rgb(240, 242, 247);
}
#content-left p{
margin-left: 57px;
font-size: 26px;
color: aliceblue;
}
#content-left p:nth-child(2){
margin-top: 26px;
}
#content-left-img{
width: 80%;
margin-left: 18%;
height: 150px;
margin-top: 87px;
}
#content-left-img img{
height: 100px;
}
#content-left-img2{
width: 80%;
margin-left: 26%;
height: 150px;
margin-top: 95px;
}
#content-left-img img{
height: 100px;
}
#loginsystem{
margin-top: 145px;
font-size: 26px;
margin-left: 36px;
color: rgb(160, 40, 49);
}
#content-right p
{
margin-left: 36px;
}
#content-right input
{
margin-left: 36px;
height: 38px;
width: 419px;
border: none;
border-radius: 6%;
outline: none;
}
#but{
display: flex;
}
#register{
margin-left: 36px;
height: 38px;
width: 200px;
border: none;
border-radius: 6%;
line-height: 38px;
font-size: 21px;
margin-top: 44px;
background-color: #fff;
}
#loginsubmit{
margin-left: 20px;
height: 38px;
width: 200px;
border: none;
border-radius: 6%;
line-height: 38px;
font-size: 21px;
margin-top: 44px;
color: #fff;
background-color: rgb(160, 40, 49);
}
#content-right a{
display: block;
position: absolute;
bottom: 1px;
right: 1px;
text-decoration: none;
color: gray;
}
js：
[HTML] 纯文本查看 复制代码 function tiao(){
window.location.href="register.html";
}
function login(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var varify=localStorage.getItem(username);
if(varify==null){
alert("账户不存在，请先进行注册")
}else{
if(varify==password){
sessionStorage.setItem("user",username)
window.location.href="index.html";
}else{
alert("密码错误，请重新输入")
}
}
}
注册页：
html：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div id="content">
<div id="content-left">
<p>Hi! 你好！</p>
<p>欢迎进入SDWU管理系统</p>
<div id="content-left-img">
<img src="img/ny.png" alt="图像无法显示">
</div>
<div id="content-left-img2">
<img src="img/bypic.png" alt="图像无法显示">
</div>
</div>
<div id="content-right">
<div id="loginsystem">注册系统</div>
<form action="">
<p>用户名</p>
<input type="text" id="username" required>
<p>密码</p>
<input type="password" name="password" id="password" required>
<p>重复密码</p>
<input type="password" name="password" id="repassword" required>
<p>电子邮箱</p>
<input type="email" id="email" required>
<p>验证码</p>
<div id="vc">
<input type="text" id="vinput" required><div id="vcode"></div>
</div>
<br />
<button id="loginsubmit" type="button">注册</button>
</form>
<a target="_blank" >如有问题跟我联系
<img border="0" src="http://wpa.qq.com/pa?p=2:2603111637:51" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</div>
</div>
<script src="js/register.js"></script>
</body>
</html>
css：
[HTML] 纯文本查看 复制代码 body{margin: 0;padding: 0;}
#content{
width: 80%;
margin-left: 10%;
height: 600px;
margin-top: 50px;
display: flex;
}
#content-left{
width: 50%;
height: 90%;
padding-top: 60px;
background-color: rgb(160, 40, 49);
}
#content-right{
width: 50%;
height: 100%;
position: relative;
background-color: rgb(240, 242, 247);
}
#content-left p{
margin-left: 57px;
font-size: 26px;
color: aliceblue;
}
#content-left p:nth-child(2){
margin-top: 26px;
}
#content-left-img{
width: 80%;
margin-left: 18%;
height: 150px;
margin-top: 87px;
}
#content-left-img img{
height: 100px;
}
#content-left-img2{
width: 80%;
margin-left: 26%;
height: 150px;
margin-top: 95px;
}
#content-left-img img{
height: 100px;
}
#loginsystem{
margin-top: 26px;
font-size: 26px;
margin-left: 46px;
color: rgb(160, 40, 49);
}
#content-right p
{
margin-left: 46px;
margin-top: 10px;
margin-bottom: 10px;
}
#content-right input
{
margin-left: 46px;
height: 30px;
width: 419px;
border: none;
border-radius: 6%;
outline: none;
}
#loginsubmit{
margin-left: 46px;
height: 38px;
width: 419px;
border: none;
border-radius: 6%;
line-height: 38px;
font-size: 21px;
margin-top: 44px;
color: #fff;
background-color: rgb(160, 40, 49);
}
#content-right a{
display: block;
position: absolute;
bottom: 1px;
right: 1px;
text-decoration: none;
color: gray;
}
#vc{
display: flex;
position: relative;
}
#vc input{
width: 319px;
}
#vc div{
position: absolute;
margin-left: 58%;
top: 46px;
border-radius: 4px;
line-height: 32px;
text-align: center;
background-color: #ddd;
width: 100px;
height: 32px;
transform: translate(17px, -48px);
}
js：
[HTML] 纯文本查看 复制代码 var vc = "1234567890avcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var vcode = document.getElementById("vcode");
var str;
function getcode(){
str="";
for(var i=1;i<5;i++){
var y=parseInt(Math.random()*vc.length)
str+=vc[y];
}
vcode.innerHTML=str;
}
getcode();
var username=document.getElementById("username");
var password=document.getElementById("password");
var repassword=document.getElementById("repassword");
var email=document.getElementById("email");
var vinput=document.getElementById("vinput");
function register(){
if(password.value==repassword.value){
if(vinput.value==str){
localStorage.setItem(username.value,password.value);
window.location.href="login.html";
}else{
alert("验证码不正确")
}
}else{
alert("两次密码输入不一致，请重新输入");
}
}
首页：
html:
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="top">
<div class="top-left"><img src="img/ny.png" alt=""></div>
<div class="top-right"><img src="img/bypic.png" alt=""></div>
</div>
<nav>
<ul id="MenuBar1" class="nav-u">
<li class="nav1"><a href="index.html">首页</a> </li>
<li class="nav1"><a href="data_query.html">查询列表页</a> </li>
<li class="nav1"><a href="data_edit.html">信息编辑页</a></li>
<li class="nav1" id="sp"><span id="welcome">欢迎用户</span><span id="user"></span></li>
</ul>
</nav>
<div id="center">
<div class="img_next">
<ul id="p">
<li class="im"><img src="img/2 (7).JPG" alt=""></li>
<li class="im"><img src="img/2 (2).JPG" alt=""></li>
<li class="im"><img src="img/2 (3).JPG" alt=""></li>
<li class="im"><img src="img/2 (4).JPG" alt=""></li>
<li class="im"><img src="img/2 (5).JPG" alt=""></li>
<li class="im"><img src="img/2 (6).JPG" alt=""></li>
<li class="im"><img src="img/2 (7).JPG" alt=""></li>
</ul>
</div>
<div class="newslist" id="newslist">
<ul id="newslist_ul">
<li class="news_li">user1 获得了一等奖</li>
<li class="news_li">user2 获得了二等奖</li>
<li class="news_li">user3 获得了三等奖</li>
<li class="news_li">user4 获得了四等奖</li>
<li class="news_li">user5 获得了五等奖</li>
<li class="news_li">user6 获得了六等奖</li>
<li class="news_li">user7 获得了七等奖</li>
<li class="news_li">user8 获得了八等奖</li>
<li class="news_li">user9 获得了九等奖</li>
<li class="news_li">user10 获得了省一等奖</li>
<li class="news_li">user11 获得了省二等奖</li>
<li class="news_li">user12 获得了省三等奖</li>
<li class="news_li">user13 获得了市二等奖</li>
</ul>
</div>
</div>
<div id="bottom">
<p>学生大赛管理系统
@author:GuoShuaiShuai
date:2023.1.4</p>
</div>
<!-- 利用jquery实现轮播、滚动效果 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>
css：
[HTML] 纯文本查看 复制代码 html{width: 100;height: 100;}
body{margin: 0;padding: 0;height: 100%;width: 100%;}
.top{width: 100%;height: 15%;background-color: rgb(160, 40, 49);padding: 0;margin: 0;display: flex;}
.top div{float: left;}
.top-left{height: 112px;flex: 1;}
.top-left img{height: 112px;margin-left: 186px;}
.top-right{flex: 1; height: 61px;margin-left: 356px;margin-top: 23px;}
.top-right img{width: 425px;height: 61px;}
nav{width: 100%;height: 7%;background-color: rgb(153, 31, 40);display: flex;}
nav #user{color: rgb(242, 239, 8);line-height: 48px;}
.nav-u{height: 50px;margin-top: 0;width: 80%;margin-left: 10%;display: flex;}
.nav1{flex: 1; height: 48px;float: left;}
nav ul{list-style-type: none;margin-bottom: 0;}
nav ul li{background-color: rgb(153, 31, 40);color: #fff;}
nav ul li a{text-decoration: none;color: #fff;display: block;line-height: 48px;text-align: center;}
nav ul li a:hover{color: #ffe2bf;}
#sp{display: flex;}
#welcome{line-height: 48px;}
#welcome{display: flex;}
#welcome a{color: rgb(242, 239, 8);}
#center{margin-top: 26px;display: flex;}
#p{margin-top: 0;}
#newslist{width: 40%;height: 400px;margin-left: 66px;overflow: hidden;position: relative;}
#newslist ul{position: absolute;margin-top: 0px;width: 100%;}
#newslist ul li{height: 40px;line-height: 40px;list-style-type: none;background-color: #f3f3f3;width: 100%;text-align: center;color: red;}
.img_next{
width: 400px;
height: 400px;
overflow: hidden;
margin-left: 166px;
}
.img_next ul{list-style-type: none;margin-left: -39px;}
#p{display: flex;}
#p li{}
#p li img{width: 400px;}
#bottom{width: 100%;background-color: rgb(153, 31, 40);position: absolute;bottom: 0px;text-align: center;}
#bottom p{color: #fff;}
js：
[HTML] 纯文本查看 复制代码 var long=-39;
var num=-400;
var i=1;
var next=function(){
// 获取ul 设置ul的margin-left属性 以实现轮播效果 过渡时间为3000毫秒
$("#p").animate({"margin-left": long+num*i+"px"}, 3000);
if(i==$(".im").length-1){
// 判断一下 如果i==li的长度-1 则ul的margin-left重置为-39
// 并且把时间设为1毫秒 为了实现无缝衔接的效果
$("#p").animate({"margin-left": "-39px"}, 1);
i=0;
}else{
i++;
}
}
// 每3000毫秒执行一个next()方法
setInterval(function(){next();},3000)
var listlong=0;
var listnum=-40;
var j=1;
var newslist_ul=document.getElementById("newslist_ul");
var l=-newslist_ul.offsetHeight;
// 复制一下ul里面的内容 为了实现无缝滚动
newslist_ul.innerHTML+=newslist_ul.innerHTML;
var newsnext=function(){
// 获取ul 设置ul的margin-left属性 以实现滚动效果 过渡时间为3000毫秒
$("#newslist_ul").animate({"top": listlong+listnum*j+"px"}, 1000);
// 当滚动到刚开始的时候的时候 就把ul的top重置为0 时间为1毫秒
if((listlong+listnum*j)==l){
$("#newslist_ul").animate({"top": "0px"}, 1);
j=0;
}else{
j++;
}
}
// 每1000毫秒执行一个next()方法
setInterval(function(){newsnext();},1000)
window.onload=function(){
var name=sessionStorage.getItem("user");
if(name==null){
document.getElementById("welcome").innerHTML="请先<a href=login.html>登录</a>"
}else{
document.getElementById("user").innerHTML=name;
}
}
信息编辑页：
html：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/data_edit.css">
</head>
<body>
<div class="top">
<div class="top-left"><img src="img/ny.png" alt=""></div>
<div class="top-right"><img src="img/bypic.png" alt=""></div>
</div>
<nav>
<ul id="MenuBar1" class="nav-u">
<li class="nav1"><a href="index.html">首页</a> </li>
<li class="nav1"><a href="data_query.html">查询列表页</a> </li>
<li class="nav1"><a href="data_edit.html">信息编辑页</a></li>
<li class="nav1" id="sp"><span id="welcome">欢迎用户</span><span id="user"></span></li>
</ul>
</nav>
<div id="center">
<p id="data_p">信息编辑</p>
<div id="content">
<span>学号:</span><input type="text" name="id" id="id" placeholder="格式101开头">
<span>姓名:</span><input type="text" name="name" id="name">
<span>性别:</span>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br />
<span>出生日期:</span><input type="date" id="datetime" name="datetime">
<span>所在班级:</span><input type="text" id="classes" name="classes">
<span>班级职务:</span>
<select name="classes_job" id="classes_job">
<option>班长</option>
<option>团支书</option>
<option>学习委员</option>
<option>心理委员</option>
<option>体育委员</option>
<option>生活委员</option>
</select><br />
<span>兴趣爱好:</span>
<input type="checkbox" name="hobby" value="听歌" required /> 听歌
<input type="checkbox" name="hobby" value="读书" /> 读书
<input type="checkbox" name="hobby" value="书法" /> 书法
<input type="checkbox" name="hobby" value="跑步" /> 跑步
<input type="checkbox" name="hobby" value="爬山" /> 爬山<br />
<span>个人简介:</span>
<textarea name="log" id="log" cols="30" rows="10"></textarea>
<button>保存</button>
</div>
</div>
<div id="bottom">
<p>学生大赛管理系统
@author:GuoShuaiShuai
date:2023.1.4</p>
</div>
<script src="js/data_eait.js"></script>
</body>
</html>
css：
[HTML] 纯文本查看 复制代码 html{height: 100%;width: 100%;}
body{margin: 0;padding: 0;height: 100%;width: 100%;}
.top{width: 100%;height: 15%;background-color: rgb(160, 40, 49);padding: 0;margin: 0;display: flex;}
.top div{float: left;}
.top-left{height: 112px;flex: 1;}
.top-left img{height: 112px;margin-left: 186px;}
.top-right{flex: 1; height: 61px;margin-left: 356px;margin-top: 23px;}
.top-right img{width: 425px;height: 61px;}
nav{width: 100%;height: 7%;background-color: rgb(153, 31, 40);display: flex;}
nav #user{color: rgb(242, 239, 8);line-height: 48px;}
.nav-u{height: 50px;margin-top: 0;width: 80%;margin-left: 10%;display: flex;}
.nav1{flex: 1; height: 48px;float: left;}
nav ul{list-style-type: none;}
nav ul li{background-color: rgb(153, 31, 40);color: #fff;}
nav ul li a{text-decoration: none;color: #fff;display: block;line-height: 48px;text-align: center;}
nav ul li a:hover{color: #ffe2bf;}
#sp{display: flex;}
#welcome{line-height: 48px;}
#welcome{display: flex;}
#welcome a{color: rgb(242, 239, 8);}
#center{width: 80%;margin-left: 10%;background-color: #f6f6f6;height: 71%;}
#data_p{
border-bottom: 1px solid #bcb3b3;
height: 5%;line-height: 100%;
font-size: 21px;padding: 10px;
font-weight: bold;
padding-left: 21px;
margin-top: 0px;
padding-top: 26px;
}
#content{margin-left: 10%;}
#content span{margin-left: 20px;margin-top: 4%;}
#content input{margin-left: 5px;margin-top: 4%;}
#content input:nth-child(2){margin-top: 0px;}
#content input:nth-child(4){margin-top: 0px;}
#content input:nth-child(6){margin-top: 0px;}
#content input:nth-child(7){margin-top: 0px;}
#content textarea{margin-top: 2%;margin-left: 2%;}
#content button{margin-left: 10%;width: 10%;height: 4%;}
#bottom{width: 100%;background-color: rgb(153, 31, 40);position: absolute;bottom: 0px;text-align: center;}
#bottom p{color: #fff;}
js：
[HTML] 纯文本查看 复制代码 window.onload=function(){
var name=sessionStorage.getItem("user");
if(name==null){
document.getElementById("welcome").innerHTML="请先<a href=login.html>登录</a>"
}else{
document.getElementById("user").innerHTML=name;
}
}
function save(){
if(sessionStorage.getItem("user")!=null){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var sex=document.getElementsByName("sex");
var datetime=document.getElementById("datetime").value;
var classes=document.getElementById("classes").value;
var classes_job=document.getElementById("classes_job").value;
var hobby=document.getElementsByName("hobby");
var log=document.getElementById("log").value;
var sexed="";
var hobbyed="";
for(var i=0;i<sex.length;i++){
if(sex[i].checked==true){
sexed=sex[i].value;
}
}
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked==true){
hobbyed+=hobby[i].value;
}
}
if(id.substring(0,3)==101){
// 把JSON对象转为JSON字符串
var datas=JSON.stringify({
'id':id,
'name':name,
'sex':sexed,
'datetime':datetime,
'classes':classes,
'classes_job':classes_job,
'hobby':hobbyed,
'log':log
});
localStorage.setItem(id,datas)
alert("数据已成功存入！")
}else{
alert("您输入的学号不合法，请重新输入")
}
}else{
alert("请先进行登录！")
}
}
查询列表页：
html：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/data_edit.css">
</head>
<body>
<div class="top">
<div class="top-left"><img src="img/ny.png" alt=""></div>
<div class="top-right"><img src="img/bypic.png" alt=""></div>
</div>
<nav>
<ul id="MenuBar1" class="nav-u">
<li class="nav1"><a href="index.html">首页</a> </li>
<li class="nav1"><a href="data_query.html">查询列表页</a> </li>
<li class="nav1"><a href="data_edit.html">信息编辑页</a></li>
<li class="nav1" id="sp"><span id="welcome">欢迎用户</span><span id="user"></span></li>
</ul>
</nav>
<div id="center">
<p id="data_p">信息编辑</p>
<div id="content">
<span>学号:</span><input type="text" name="id" id="id" placeholder="格式101开头">
<span>姓名:</span><input type="text" name="name" id="name">
<span>性别:</span>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br />
<span>出生日期:</span><input type="date" id="datetime" name="datetime">
<span>所在班级:</span><input type="text" id="classes" name="classes">
<span>班级职务:</span>
<select name="classes_job" id="classes_job">
<option>班长</option>
<option>团支书</option>
<option>学习委员</option>
<option>心理委员</option>
<option>体育委员</option>
<option>生活委员</option>
</select><br />
<span>兴趣爱好:</span>
<input type="checkbox" name="hobby" value="听歌" required /> 听歌
<input type="checkbox" name="hobby" value="读书" /> 读书
<input type="checkbox" name="hobby" value="书法" /> 书法
<input type="checkbox" name="hobby" value="跑步" /> 跑步
<input type="checkbox" name="hobby" value="爬山" /> 爬山<br />
<span>个人简介:</span>
<textarea name="log" id="log" cols="30" rows="10"></textarea>
<button>保存</button>
</div>
</div>
<div id="bottom">
<p>学生大赛管理系统
@author:GuoShuaiShuai
date:2023.1.4</p>
</div>
<script src="js/data_eait.js"></script>
</body>
</html>
css：
[HTML] 纯文本查看 复制代码 html{height: 100%;width: 100%;}
body{margin: 0;padding: 0;height: 100%;width: 100%;}
.top{width: 100%;height: 15%;background-color: rgb(160, 40, 49);padding: 0;margin: 0;display: flex;}
.top div{float: left;}
.top-left{height: 112px;flex: 1;}
.top-left img{height: 112px;margin-left: 186px;}
.top-right{flex: 1; height: 61px;margin-left: 356px;margin-top: 23px;}
.top-right img{width: 425px;height: 61px;}
nav{width: 100%;height: 7%;background-color: rgb(153, 31, 40);display: flex;}
nav #user{color: rgb(242, 239, 8);line-height: 48px;}
.nav-u{height: 50px;margin-top: 0;width: 80%;margin-left: 10%;display: flex;}
.nav1{flex: 1; height: 48px;float: left;}
nav ul{list-style-type: none;}
nav ul li{background-color: rgb(153, 31, 40);color: #fff;}
nav ul li a{text-decoration: none;color: #fff;display: block;line-height: 48px;text-align: center;}
nav ul li a:hover{color: #ffe2bf;}
#sp{display: flex;}
#welcome{line-height: 48px;}
#welcome{display: flex;}
#welcome a{color: rgb(242, 239, 8);}
#center{height: 70%;}
#center table{
width: 100%;
border-spacing: 0;
border: 1px solid #999999;
}
#center table tr{height: 29px;display: flex;}
#center table tr td{border: 1px solid rgb(249, 249, 249);flex: 1;}
#center table tr:nth-child(1){background-color: rgb(249, 249, 249);}
#center table tr th{text-align: left;color: black;border: 1px solid #c6c6c6;flex: 1;}
#center_top{height: 12%;width: 80%;margin-left: 10%;padding-top: 3%;}
#tab{overflow: auto;width: 80%;height: 85%;margin-left: 10%;}
#center_top span{margin-left: 5%;}
#center_top input{height: 37%;}
#center_top select{height: 37%;}
#center_top button{margin-left: 3%;}
#bottom{width: 100%;background-color: rgb(153, 31, 40);position: absolute;bottom: 0px;text-align: center;}
#bottom p{color: #fff;}
js：
[HTML] 纯文本查看 复制代码 window.onload=function(){
var name=sessionStorage.getItem("user");
if(name==null){
document.getElementById("welcome").innerHTML="请先<a href=login.html>登录</a>"
}else{
document.getElementById("user").innerHTML=name;
}
}
function query(){
// 获取选择的类别
var sort=document.getElementById("sort").value;
var content=document.getElementById("content").value;
var ta=document.getElementById("ta");
var num=localStorage.length;
var varify="";
for(var i=0;i<num;i++){
var id=localStorage.key(i);
// 因为localStorage中存了很多数据 不单纯是学生数据
// 所以我规定了学号前三位必须是101 学号就是key
// 接下来就是提取key的前三位 看看是不是101
if(id.substring(0,3)==101){
// 将JSON格式字符串转换为js对象
var obj=JSON.parse(localStorage.getItem(id))
if(sort=="id"){
varify=obj.id;
}
if(sort=="name"){
varify=obj.name;
}
if(sort=="sex"){
varify=obj.sex;
}
if(sort=="classes"){
varify=obj.classes;
}
if(sort=="classes_job"){
varify=obj.classes_job;
}
if(varify==content){
var rt=document.createElement("tr");
var rd1=document.createElement("td");
var rd2=document.createElement("td");
var rd3=document.createElement("td");
var rd4=document.createElement("td");
var rd5=document.createElement("td");
var rd6=document.createElement("td");
var rd7=document.createElement("td");
var rd8=document.createElement("td");
var id=document.createTextNode(obj.id);
rd1.appendChild(id);
var name=document.createTextNode(obj.name);
rd2.appendChild(name);
var sex=document.createTextNode(obj.sex);
rd3.appendChild(sex);
var datetime=document.createTextNode(obj.datetime);
rd4.appendChild(datetime);
var classes=document.createTextNode(obj.classes);
rd5.appendChild(classes);
var classes_job=document.createTextNode(obj.classes_job);
rd6.appendChild(classes_job);
var hobby=document.createTextNode(obj.hobby);
rd7.appendChild(hobby);
var log=document.createTextNode(obj.log);
rd8.appendChild(log);
rt.appendChild(rd1);
rt.appendChild(rd2);
rt.appendChild(rd3);
rt.appendChild(rd4);
rt.appendChild(rd5);
rt.appendChild(rd6);
rt.appendChild(rd7);
rt.appendChild(rd8);
ta.appendChild(rt);
}
}
}
}
function queryall(){
var sort=document.getElementById("sort").value;
var content=document.getElementById("content").value;
var ta=document.getElementById("ta");
var num=localStorage.length;
for(var i=0;i<num;i++){
var id=localStorage.key(i);
// 因为localStorage中存了很多数据 不单纯是学生数据
// 所以我规定了学号前三位必须是101 学号就是key
// 接下来就是提取key的前三位 看看是不是101
if(id.substring(0,3)==101){
// 将JSON格式字符串转换为js对象
var obj=JSON.parse(localStorage.getItem(id))
var rt=document.createElement("tr");
var rd1=document.createElement("td");
var rd2=document.createElement("td");
var rd3=document.createElement("td");
var rd4=document.createElement("td");
var rd5=document.createElement("td");
var rd6=document.createElement("td");
var rd7=document.createElement("td");
var rd8=document.createElement("td");
var id=document.createTextNode(obj.id);
rd1.appendChild(id);
var name=document.createTextNode(obj.name);
rd2.appendChild(name);
var sex=document.createTextNode(obj.sex);
rd3.appendChild(sex);
var datetime=document.createTextNode(obj.datetime);
rd4.appendChild(datetime);
var classes=document.createTextNode(obj.classes);
rd5.appendChild(classes);
var classes_job=document.createTextNode(obj.classes_job);
rd6.appendChild(classes_job);
var hobby=document.createTextNode(obj.hobby);
rd7.appendChild(hobby);
var log=document.createTextNode(obj.log);
rd8.appendChild(log);
rt.appendChild(rd1);
rt.appendChild(rd2);
rt.appendChild(rd3);
rt.appendChild(rd4);
rt.appendChild(rd5);
rt.appendChild(rd6);
rt.appendChild(rd7);
rt.appendChild(rd8);
ta.appendChild(rt);
}
}
}
如果需要图片 可联系我
| 
[复制链接]
发表于 2023-3-15 21:18
