极客笔记js 做一个登录成功跳转页面
js 做一个登录成功跳转页面
在网页开发中，经常会遇到用户需要登录后才能访问特定页面的情况。为了提升用户体验，通常会在用户输入正确的用户名和密码后跳转到登录成功页面。今天我们就来学习如何使用JavaScript实现登录成功后的页面跳转效果。
1. 创建基本的登录页面
首先，我们需要创建一个简单的登录页面，包括用户名和密码的输入框以及登录按钮。在这个示例中，我们简化登录过程，不涉及真正的后端服务器验证，只做简单的前端逻辑演示。
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<label for="username">Username:</label>
<input type="text" id="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"><br><br>
<button id="loginBtn">Login</button>
<script src="login.js"></script>
</body>
</html>
2. 编写 JavaScript 代码
接下来，我们在一个单独的JavaScript文件中编写实现登录验证和页面跳转的代码。我们会验证用户输入的用户名和密码是否匹配，如果匹配则跳转到另一个页面。
document.getElementById('loginBtn').addEventListener('click', function() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 假设用户名为 'admin'，密码为 '123456'
if (username === 'admin' && password === '123456') {
// 登录成功，跳转到另一个页面
window.location.href = 'success.html';
} else {
alert('Login Failed. Please check your username and password.');
}
});
在上面的代码中，我们通过addEventListener方法为登录按钮添加了一个点击事件监听器。当用户点击登录按钮时，我们获取输入的用户名和密码，然后与预设的用户名和密码进行比对。如果输入正确，则使用window.location.href跳转到success.html页面；如果输入错误，则弹出一个警告框提示用户登录失败。
3. 创建登录成功页面
为了完整的演示，我们还需要创建一个登录成功页面success.html，用于展示成功登录后的效果。
<!DOCTYPE html>
<html>
<head>
<title>Login Success</title>
</head>
<body>
<h1>Login Success!</h1>
<p>Welcome, admin!</p>
</body>
</html>
4. 测试运行结果
现在我们可以在浏览器中打开登录页面(index.html)进行测试。输入正确的用户名和密码（’admin’和’123456’），然后点击登录按钮，应该会跳转到登录成功页面(success.html)，显示出成功登录的效果。
通过这个简单的示例，我们了解了如何使用JavaScript实现登录成功后的页面跳转效果。当然，实际的登录验证逻辑会更加复杂，涉及到后端服务器验证和安全性考虑，但基本的前端页面跳转逻辑是相似的。