js登录界面代码自用,使用js制作简易登录页面

发布时间：2022-11-23

本文目录一览：

  1. 如何用js制作Tab栏官网登录界面
  2. 求用js和html写出静态网页的登录窗口的代码
  3. 用javascript编写一段用户名和密码登录代码。点击登录按钮后，页面跳转到另一个页面，显示此用户名和密码的
  4. JS登录界面如何储存用户名和密码信息，实现登录的时候查询验证匹配，不用数据库有三个用户，求JS代码

如何用js制作Tab栏官网登录界面

1、在桌面找到并且打开js软件。 2、新建一个项目，并且保存打开项目。 3、依次写入想要的官网代码即可。以上就是用js制作tab栏官网登录界面的方法。

求用js和html写出静态网页的登录窗口的代码

function login(){
  if (document.login.usename.value == "logon" && document.login.password.value == "logon") {
    location.href = "main.html";
    //document.login.usename 跟document.login.password 中的login 要换成你的表单名称,
    //usename、password 要换成你字段的名称。
  } else {
    return false;
  }
}

用javascript编写一段用户名和密码登录代码。点击登录按钮后，页面跳转到另一个页面，显示此用户名和密码的

function login() {
  var username = document.getElementById("userName");
  var password = document.getElementById("password");
  if (username.value == "admin" && password.value == "123456") {
    window.location.href = "success.html";
  }
}

为登录按钮注册 onclick="login()"

JS登录界面如何储存用户名和密码信息，实现登录的时候查询验证匹配，不用数据库有三个用户，求JS代码

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    用户名 &nbsp;: <input type="text" name="username" id="username_input"><br>
    密码 &nbsp;: <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>
推荐文章