首页 > 基础资料 博客日记
通过JavaScript实现页面跳转------JavaScript实现简单的登录功能
2024-07-09 09:00:05基础资料围观348次
文章通过JavaScript实现页面跳转------JavaScript实现简单的登录功能分享给大家，欢迎收藏Java资料网，专注分享技术知识
核心代码
location.href = "需要跳转的页面的地址";
代码说明
通过以上代码可以在JavaScript中实现页面跳转
案例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
请输入用户名:
<input type="text" class="userName">
请输入密码:
<input type="password" class="userPwd">
<button class="login">确认登录</button>
<script>
// 获取登录按钮
var login = document.getElementsByClassName("login")[0];
// 给登录按钮绑定点击事件
login.onclick = function(){
// 获取用户名和密码(注：获取到的用户名和密码都是字符串类型。)
var userName = document.getElementsByClassName("userName")[0].value
var userPwd = document.getElementsByClassName("userPwd")[0].value
// 假定我们设置的用户名分别为：user和123
if(userName=="user" && userPwd=="123"){
location.href = "登录成功页面.html"; //这里填写你需要登录成功所跳转的页面的路径
}else{
alert("登录失败")
}
console.log(userName,userPwd)
}
</script>
</body>
</html>
运行说明：
只需将第26行的页面路径改为你登录成功之后展示的页面的路径，代码即可运行。
当输入用户名user和密码123，即可登录成功，跳转到你需要展示的界面。
应用场景
使用该代码后，通过JavaScript即可实现简单的登录功能（如案例所示）
文章来源:https://blog.csdn.net/qq_62563725/article/details/138547337
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
