首页：
程序启动时，进入首页，在首页可以选择的操作是：
1：注册
2：登录
1、注册：当容器中存在用户输入的用户名时，或者用户名的长度不再6-15之间时，注册失败
密码需要输入2次最终确定。如果两次输入的密码不一致，或者密码长度不在6-15之间时，注册失败
验证码，当用户名和密码都符合规范时，点击发送验证码，显示4位数的纯数字验证码，如果验证码输入错的话，注册失败；
当注册成功时，将用户名和密码添加到指定的容器中，
2、登录：只有当用户名和密码和验证码都正确的时候，才显示登录成功
输入用户名和密码判断是否正确，同时验证输入的验证码是否正确，正确则显示登录成功，失败显示登录失败。
3、登录成功之后，在页面显示欢迎你：用户名， 同时可以进行的操作如下
(1) 可以选择查看所有用户信息，显示所有的用户名和密码。++
(2) 修改密码，修改密码前必须验证原密码，输入正确可以进行修改，输入错误则不能进行修改操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js">
</script>
</head>
<body>
<form action="登录.html">
账户：<input type="" name="name" id="n" /><br />
密码：<input type="password" name="password" id="p" />
<input type="submit"/>
</form>
再次输入密码：<input type="password" name="password" id="d" /><br />
<input type="" id="postexe" />
<button id="post">发送验证码</button><br />
<button id="create">注册</button>
<script type="text/javascript">
var xing=["zhangsan","wangwu"]
var ma=[123123,111111]
var flag1=false,flag2=false;
var t;
$("#post").click(function(){
var a=$("#n").val()
var b=$("#p").val()
var c=$("#d").val()
//用户名验证
if(a.length<6 || a.length>15 || b.length<6 || b.length>15){
alert("用户名长度或者密码长度有误")
}else if(a == xing[0] || a == xing[1] || b == ma[0] || b == ma[1]){
alert("用户名和密码已被注册")
}else if(b != c){
alert("两次输入的密码不同，请输入相同的密码")
}else{
t="";
for(var i=0;i<4;i++){
t+=Math.floor(Math.random()*10)
}
console.log(t)
}
$("#create").click(function(){
var yzm=$("#postexe").val()
if(yzm == t){
alert("注册成功")
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js">
</script>
<style type="text/css">
#div{
display: none;
}
</style>
</head>
<body>
<div id="app">
账户：<input type="" name="" id="mrs" value="" /><br />
密码：<input type="" name="" id="word" value="" /><br />
<input type="" id="postexe" />
<button onclick="denglu()">发送验证码</button><br />
<button id="post">登录</button>
<button ><a href="注册.html">注册</a></button>
</div>
<div id="div">
欢迎你<span id="huan"></span>
<button id="select">查看</button>
<span id="xinxi"></span>
<span id="xinxa"></span>
<input id="xiu"/>
<button id="gai">修改密码</button>
</div>
<script type="text/javascript">
var xing=["zhangsan","wangwu"]
var ma=[123123,111111]
var flag1=false,flag2=false;
var t;
function denglu(){
var parm=location.search
console.log(parm)
parm=parm.substring(1)
//将截取的数据通过&分割
var arr=parm.split("&")
//创建一个新的对象
var obj=new Object()
//对数组在进行循环
for(var i=0;i<arr.length;i++){
//将数组分割为0，1 name和数据
obj[arr[i].split("=")[0]]=arr[i].split("=")[1]
}
console.log(obj.name)
console.log(obj.password)
var Uname = new Array(xing.length+1)
var Upwd = new Array(ma.length+1)
//通过forin遍历数组将两个数组的数据赋值给心数组
for(var x in xing){
Uname[x]=xing[x];
}
for(var y in ma){
Upwd[y]=ma[y];
}
//通过下表将读取的数据存放到数组最后一位
Uname[Uname.length-1]=(obj.name)
Upwd[Upwd.length-1]=(obj.password)
console.log(Uname)
console.log(Upwd)
var mr=document.getElementById("mrs").value
var wo=document.getElementById("word").value
var num=0;
for (var ds=0;ds<Uname.length;ds++) {
if(mr == Uname[ds]){
for(var yy=0;yy<Upwd.length;yy++){
if(wo == Upwd[yy]){
num++
}
}
}
}
if(num >0){
t="";
for(var i=0;i<4;i++){
t+=Math.floor(Math.random()*10)
}
console.log(t)
}
}
$("#post").click(function(){
var a=$("#postexe").val()
var b=$("#mrs").val()
if (a == t) {
alert("登录成功")
$("#app").hide()
$("#div").show()
$("#huan").html(b)
} else{
alert("登陆失败")
}
})
$("#select").click(function(){
for(var x in xing){
$("#xinxi").html(xing[x])
}
for(var y in ma){
$("#xinxa").html(ma[y])
}
})
$("#gai").click(function(){
var a=parseInt(prompt("输入原密码"))
var b=$("#xiu").val()
var num=0;
for (var x in ma) {
if(ma[x] == a){
ma[x] = b;
}else{
num++
}
}
if(num > 1){
alert("原密码输入错误")
}
console.log(ma)
})
</script>
</body>
</html>