【HTML】原生js实现的图书馆管理系统
1、引言
2、作品介绍
2.1、作品简介方面
原生js实现的图书馆管理系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
【coding加油站】原生js实现的图书管理系统
【coding加油站】原生js实现的图书管理系统3.1、登录页
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
.div1{
width:400px;
height:220px;
margin:0 auto;
position:absolute;
left:40%;
top:35%;
background: none repeat scroll 0 0 skyblue;
border: 1px solid brown;
height: 250px;
padding-top: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="div1" id="loginBox">
<form action="LoginServlet" method="post">
<h3>图书管理系统</h3>
<p>
<input type="text" name="username" id="username" placeholder="账号" autocomplete="off"></p>
<p>
<input type="password" name="password" id="password" placeholder="密码">
</p>
<p style="color: red" class="tip"></p>
<p><button type="button" id="login">登录</button></p>
</form>
<span><a href="3.html" style="color: brown">注册</a></span>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(#login).click(function(){
username = $(.div1 #username).val();
password = $(.div1 #password).val();
if(username!=admin||password!=admin){
$(.div1 .tip).text(用户名或密码错误);
if(username!=||password!=){
$(.div1 .tip).text(用户名或密码不能为空);
}
}else{
console.log(下一步);
alert(用户登陆成功)
window.location.href="2.html";
}
});
});
</script>
</body>
</html>
3.2、管理界面
相关代码：
3.3、编辑界面
相关代码：
总结