首頁：
程序啟動時，進入首頁，在首頁可以選擇的操作是：
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>