<!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实现一个简单的登录页面
猜你喜欢
转载自www.cnblogs.com/maimaiti/p/10564328.html
今日推荐
周排行