js實現一個簡單的登錄頁面
阿新 • • 發佈:2019-03-20
for str amp ntb mar 登錄失敗 .get border rip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 300px;
height: 200px;
border: 1px solid red;
margin: 100px auto;}
</style>
</head>
<body>
<div class="div1">
賬號:<input type="text" id="username"> <br>
密碼:<input type="text" id="password"> <br>
<input type="button" value="登錄" onclick="f1()">
</div>
</body>
</html>
<script>
var p1={username:"張三",
password:"123"
};
var p2={
username:"李四",
password:"1234"
};
var p3= {
username:"王昊",
password:"12345"
}
var array=[p1,p2,p3];
var str=JSON.stringify(array);
localStorage.setItem("user",str);
function f1() {
//獲取輸入的賬號
var userName=document.getElementById("username").value;
//獲取輸入的密碼
var password=document.getElementById("password").value;
//取出來本地存儲
var str=localStorage.getItem("user");
var array=JSON.parse(str);
//循環數組和輸入的進行對比
var flag=0;
for(var i=0;i<array.length;i++){
//取出對應的對象信息
var obj=array[i];
if(obj.username==userName && obj.password==password){
flag=1;
}
}
alert(flag==0?"登錄失敗":"登錄成功");
}
</script>
js實現一個簡單的登錄頁面