CSS样式：
*{
margin: 0;
padding: 0;
}
.box{
width: 910px;
margin: 100px auto;
}
.box ul li{
list-style: none;
float: left;
width: 150px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: rgba(255,255,255,0.8);
/*background-color: pink;*/
margin: 0 1px 1px 0;
}
.first li{
font-weight: bold;
margin-top: 10px;
}
.box input{
width: 150px;
height: 26px;
margin: 10px 10px 0 0;
padding-left: 6px;
border: 1px solid #999;
border-radius: 2px;
}
select{
width: 100px;
height: 26px;
margin: 10px 10px 0 0;
border: 1px solid #999;
border-radius: 2px;
}
.shuru button,#search{
width: 60px;
height: 27px;
}
.updata{
margin-left: 10px;
}
#sousuo{
width: 300px;
}
#box{
padding-top: 10px;
}
#box button{
margin: 0 5px;
width: 50px;
}
#checkData{
width: 760px;
display: none;
}
.index {
position: fixed;
width: 100%;
background: #1d1d1d;
height: 100%;
}
#stars {
width: 100%;
}
.star {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFF;
position: absolute;
transform-origin: 100% 0;
animation: star-ani 4s linear infinite;
-webkit-animation: star-ani 5s linear infinite;
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
opacity: 0;
z-index: 2;
}
.star:after {
content: '';
display: block;
top: 0px;
left: 4px;
border: 0px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
transform: rotate(-45deg) translate3d(1px, 3px, 0);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
transform-origin: 0% 100%;
}
@keyframes star-ani {
0% {
opacity: 0;
transform: scale(0) translate3d(0, 0, 0);
}
20% {
opacity: 0.8;
transform: scale(0.2) translate3d(-100px, 100px, 0);
}
40% {
opacity: 0.8;
transform: scale(0.4) translate3d(-200px, 200px, 0);
}
60% {
opacity: 0.8;
transform: scale(0.6) translate3d(-300px, 300px, 0);
}
80% {
opacity: 1;
transform: scale(1) translate3d(-350px, 350px, 0);
}
100% {
opacity: 1;
transform: scale(1.2) translate3d(-400px, 380px, 0);
}
}HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="index">
<div id="stars">
<div class="star" style="top: 0px;left: 500px;"></div>
</div>
<div class="box">
<div class="sousuo">
<input type="text" id="sousuo" placeholder="请输入姓名/性别/年龄/职位/时间" />
<button id="search">查询</button>
</div>
<div class="shuru">
<input type="text" id="name" placeholder="请输入姓名" />
<select id="sex"><option>请选择性别</option><option>男</option><option>女</option></select>
<input type="text" id="age" placeholder="请输入年龄" />
<select id="position">
<option>请选择职位</option>
<option>项目经理</option>
<option>审计员</option>
<option>系统分析员</option>
<option>Java工程师</option>
<option>UI设计师</option>
<option>高级程序员</option>
<option>管理顾问</option>
<option>行业顾问</option>
<option>网络工程师</option>
</select>
<input type="data" id="time" placeholder="请输入入职时间" />
<button id="add">添加</button><button class='updata'>更新</button>
</div>
<div id="box">
<ul class="first">
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>职位</li>
<li>入职时间</li>
<li>操作</li>
</ul>
<div id="content">
</div>
<div id="checkData">
</div>
</div>
</div>
</div>
<script>
var stars = document.getElementById('stars')
// js随机生成流星
for(var j = 0; j < 20; j++) {
var newStar = document.createElement("div")
newStar.className = "star"
newStar.style.top = randomDistance(500, -100) + 'px'
newStar.style.left = randomDistance(1980, 300) + 'px'
stars.appendChild(newStar)
}
// 封装随机数方法
function randomDistance(max, min) {
var distance = Math.floor(Math.random() * (max - min + 1) + min)
return distance
}
var star = document.getElementsByClassName('star')
// 给流星添加动画延时
for(var i = 0, len = star.length; i < len; i++) {
star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.8 + 's'
}
</script>
</body>
</html>前端js代码：
// 正则验证
var flag1 = false;
$("#age").blur(function(){
var val = $("#age").val();
var reg = /^([0-9]|[0-9]{2}|100)$/;
if(val == ""){
$("#age").css("border-color","red");
}else if(reg.test(val)){
$("#age").css("border-color","green");
}else{
$("#age").css("border-color","red");
alert("格式错误");
flag1 = true;
}
})
var flag2 = false;
$("#name").blur(function(){
var val = $("#name").val();
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if(val == ""){
$("#name").css("border-color","red");
}else if(reg.test(val)){
$("#name").css("border-color","green");
}else{
$("#name").css("border-color","red");
alert("格式错误");
flag2 = true;
}
})
var flag3 = false;
$("#time").blur(function(){
var val = $("#time").val();
var reg = /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(val == ""){
$("#time").css("border-color","red");
}else if(reg.test(val)){
$("#time").css("border-color","green");
}else{
$("#time").css("border-color","red");
alert("格式错误");
flag3 = true;
}
})
$(function(){
// 显示
$.ajax({
type : "POST",
url : "/Data",
success : function(data){
// console.log(data)
var data = JSON.parse(data);
addData(data);
}
})
// 增加
$("#add").click(function(){
if($("#name").val() == "" || $("#sex").val() == "" || $("#age").val() == "" || $("#position").val() == "" || $("#time").val() == ""){
alert("请将需要添加的信息填写完整");
}
if( flag1 || flag2 || flag3){
alert("格式错误！")
}
else{
var result = confirm("确定添加吗？");
if(result){
$.ajax({
type : "POST",
url : "/addData",
data : {
name : $("#name").val(),
sex : $("#sex").val(),
age : $("#age").val(),
position : $("#position").val(),
time : $("#time").val()
},
success : function(data){
console.log(data);
// if(data == 0){
// alert("此人信息已存在");
// }else{
var data = JSON.parse(data);
addData(data)
$("input").val('')
// }
}
})
}
}
})
// 查询
$("#search").click(function(){
if($("#sousuo").val() == ""){
alert("请输入姓名/性别/年龄/职位/时间");
}else{
$.ajax({
type : "GET",
url : "/checkedData",
data : {value : $("#sousuo").val()},
success : function(data){
var data = JSON.parse(data);
if(data.length == 0){
alert("没有找到查询的相关信息！")
return;
}else{
var result = "";
for(var i = 0;i<data.length;i++){
result += "<ul><li>"+data[i].name+"</li><li>"+data[i].sex+"</li><li>"+data[i].age+"</li><li>"+data[i].position+"</li><li>"+data[i].time+"</li></ul>";
}
var a = "查询的结果：" + result;
$("#checkData").html(a);
$("#checkData").css("display","block");
}
}
})
}
})
})
function addData(data){
var result = "";
for(var i = 0;i<data.length;i++){
// console.log(data[i].name)
result += "<ul><li>"+data[i].name+"</li><li>"+data[i].sex+"</li><li>"+data[i].age+"</li><li>"+data[i].position+"</li><li>"+data[i].time+"</li><li><button class='c' onclick='change(this)'>修改</button><button class='del'>删除</button></li></ul>";
$("#content").html(result);
}
// 删除
var parent2;
$(".del").click(function(){
var index = $(this).parent().parent().index();
// console.log(index)
parent2 = $(this).parent().parent()
var result = confirm("确定删除吗？");
if(result){
$.ajax({
type : "GET",
url : "/delData",
data : {index : index},
success : function(data){
if(data == 1){
parent2.remove()
}else{
alert("删除失败");
}
}
})
}
})
// 更新
var index;
var parent;
$(".c").click(function(){
index = $(this).parent().parent().index();
parent = $(this).parent().parent();
})
// console.log(index)
$(".updata").click(function(){
// console.log(index);
if($("#name").val() == "" || $("#sex").val() == "" || $("#age").val() == "" || $("#position").val() == "" || $("#time").val() == ""){
alert("信息未填写完整");
}
else if( flag1 || flag2 || flag3){
alert("格式错误！")
}
else{
var result = confirm("确定修改吗？");
if(result){
$.ajax({
type : "POST",
url : "/changeData",
data : {
index : index,
name : $("#name").val(),
sex : $("#sex").val(),
age : $("#age").val(),
position : $("#position").val(),
time : $("#time").val()
},
success : function(data){
// console.log(data)
if(data == 1){
// addData(data);
parent.find("li").eq(0).html($("#name").val());
parent.find("li").eq(1).html($("#sex").val());
parent.find("li").eq(2).html($("#age").val());
parent.find("li").eq(3).html($("#position").val());
parent.find("li").eq(4).html($("#time").val());
$("input").val('');
}else{
alert("修改失败");
}
}
})
}
else{
alert("修改失败")
}
}
})
}
// 修改
function change(obj){
var user = document.getElementById("name");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var position = document.getElementById("position");
var time = document.getElementById("time");
var ul = obj.parentNode.parentNode;
var li = ul.getElementsByTagName("li");
rowIndex = obj.parentNode.parentNode.rowIndex;
user.value = li[0].innerHTML;
sex.value = li[1].innerHTML;
age.value = li[2].innerHTML;
position.value = li[3].innerHTML;
time.value = li[4].innerHTML;
}后台代码：
const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring")
var server = http.createServer();
server.on("request",(req,res)=>{
var urlObj = url.parse(req.url,true);
var pathname = urlObj.pathname;
if((req.url == "/index.html" || req.url == "/") && req.method == "GET"){
fs.readFile("./index.html", "utf8", (err,data)=>{
if(err){
throw err;
}
res.end(data)
})
}else if(req.url == "/js/index.js" && req.method == "GET"){
fs.readFile("./js/index.js","utf8",(err,data) => {
if(err){
throw err;
}
res.end(data);
})
}else if(req.url == "/css/style.css" && req.method == "GET"){
fs.readFile("./css/style.css","utf8",(err,data) => {
if(err){
throw err;
}
res.end(data);
})
}
else if(req.url == "/Data" && req.method == "POST"){
fs.readFile("./js/add.json","utf8",(err,data) => {
if(err){
throw err;
}
res.end(data);
})
}
// 增
else if(pathname == "/addData" && req.method == "POST"){
var data = "";
req.on("data",(chunk)=>{
data += chunk;
})
req.on("end",()=>{
var obj = querystring.parse(data);
// console.log(obj);
fs.readFile("./js/add.json",function(err,data){
if(err){
throw err;
}
var result = JSON.parse(data);
result.push(obj);
var str = JSON.stringify(result);
// console.log(result)
fs.writeFileSync("./js/add.json" ,str, "utf-8");
fs.readFile("./js/add.json" , "utf-8" , function (err,data) {
res.end(data);
});
})
})
}
// 删
else if(pathname == "/delData" && req.method == "GET"){
var query = urlObj.query;
// console.log(query)
fs.readFile("./js/add.json","utf8",(err,data)=>{
if(err){
throw err;
}
var result = JSON.parse(data);
for(var i= 0;i<result.length;i++){
if(query.index == i){
result.splice(i,1);
// console.log(result);
var str = JSON.stringify(result);
fs.writeFileSync("./js/add.json",str,"utf-8");
res.end("1")
}
}
})
}
// 查
else if(pathname == "/checkedData" && req.method == "GET"){
var query = urlObj.query;
// console.log(query);
fs.readFile("./js/add.json","utf8",(err,data)=>{
if(err){
throw err;
}
var arr = [];
var result = JSON.parse(data);
for(var i = 0;i<result.length;i++){
if(query.value == result[i].name || query.value == result[i].sex || query.value == result[i].age || query.value == result[i].position || query.value == result[i].time){
arr.push(result[i]);
}
}
// console.log(arr);
var data = JSON.stringify(arr)
res.end(data);
})
}
// 改
else if(pathname == "/changeData" && req.method == "POST"){
var data = "";
req.on("data",(chunk)=>{
data += chunk;
})
req.on("end",()=>{
var obj = querystring.parse(data);
// console.log(obj);
fs.readFile("./js/add.json",function(err,data){
if(err){
throw err;
}
var result = JSON.parse(data);
// console.log(result)
for(var i = 0;i<result.length;i++){
if(obj.index == i){
result[i].name = obj.name;
result[i].sex = obj.sex;
result[i].age = obj.age;
result[i].position = obj.position;
result[i].time = obj.time;
var str = JSON.stringify(result);
// console.log(str)
fs.writeFileSync("./js/add.json" ,str, "utf-8");
res.end("1")
}
}
})
})
}
})
server.listen(8080);
console.log("服务器已启动")
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
