HTML代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用户名 : <input type="text" name="username" id="username_input"></br>
密码 : <input type="password" name="passwd" id="passwd_input"></br>
<input type="button" value="登录" onclick="login()">
</div>
</body>
</html>
Js代码
<script type="text/javascript">var accountAll = [
{'username' : 'admin','passwd' : 'admin123'},
{'username' : 'jack','passwd' : 'jack'}
] // 存储账户json数据的数组
function login(){ //登陆判断
var username = document.getElementById('username_input').value // 获取username输入框内容
var passwd = document.getElementById('passwd_input').value // 获取passwd输入框内容
var account = accountAll.filter(function(e){return e.username == username})[0] // 筛选账号返回数组，不存在则返回空数组
if(!account){
console.log('账户不存在')
} else {
if(account.username == username && account.passwd == passwd){
console.log('登陆成功')
} else {
console.log('登陆失败')
}
}
}
</script>
1、首先在一个文件里面准备两个自己写的HTML文件以便进行跳转的效果查看。
2、接着可以用location.href来指定要跳转的页面便可。
3、然后在浏览器中点击按钮便可以看到跳转了。
4、如图，此时便会从422a跳到422b了。
5、最后可以直接alert弹出location.href便可以查看到当前页面的地址了，这样就完成了跳转并且登录。
① 建议使用HTML标签时用语义化标签，比如主块部分就先用一个section标签括起来；
② 外加css样式设置美化页面，特别是登录界面的灵动感；
③ JavaScript绑定事件，实现更加人性化的功能；
