Question

我想做一个锁屏，当我点击一个按钮时，输入密码需要显示。我设置了密码，当输入有效密码并按Enter时，锁屏消失。谢谢你们！

这是我的演示：https://jsbin.com/rugoqupora/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button>Lockscreen</button>
 <div class="lock-screen">
   <input type="text" placeholder="Password">
 </div>
</body>
</html>

.lock-screen {
  display: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

btn = document.querySelector('button');
lockscreen = document.querySelector('.lock-screen');
btn.addEventListener('click', function(){
  lockscreen.style.display = 'flex';
})

Answer 1

当前没有使用纯JavaScript制作锁屏的方法！您可以制作一个人工的凭据，将凭据存储在其内部，但是黑客可以轻松地在代码中查找并获取用户名/密码，从而使其不安全。

真正实现此目标的唯一方法是使用服务器端语言（如PHP，Node.js）和Web语言（如JavaScript）。但是，为此，您需要设置一台（或多台）存储凭据的服务器，然后将用户的输入发送到服务器，并进行 server 检查以确保它们正确。这样，客户端永远不会存储密码，从而使其他人无法找到密码。（只要您对服务器的保护足够好并对其进行正确编码。）

Answer 2

您可以轻松创建表单输入等。但是，您必须托管服务器来存储所有凭据，并将凭据（散列）发送到服务器。

当您想检查它是否有效时，只需对您键入的密码进行哈希处理，然后将其发送到服务器，然后如果服务器说它与存储的密码匹配，则允许他们通过。

我在这里创建了一个示例登录对话框。

function showLogin() {
  // .show() doesn't work with transitions
  $("#u, #p").val("");
  $("#login").show().css("opacity", "1");
  $("#loginBackground").show().css("opacity", "0.5");
}

function hideLogin() {
  // .hide() doesn't work with transitions,
  // but you need it for user interaction
  // with objects behind it.
  $("#login, #loginBackground").css("opacity", "0").hide();
}

function login() {
  var username = $("#u").val();
  var password = $("#p").val();
  // Do something here!
}

input {
  border-radius: 5px;
  background: white;
  border: solid 1px black;
  height: 20px;
  margin-top: 3px;
  margin-bottom: 2px;
  width: 200px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.big-button {
  height: 50px;
  padding: 0px;
}

.login {
  padding-left: 5px;
  padding-right: 5px;
  width: 188px;
}

input[type="button"],
input[type="submit"],
button {
  cursor: pointer;
}

#login {
  transition: 0.2s;
  border-radius: 5px;
  position: fixed;
  background: white;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  top: 8px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  height: 150px;
  z-index: 10000;
}

#loginBackground {
  transition: 0.2s;
  background-color: black;
  opacity: 0.5;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  margin: 0px;
  z-index: 9999;
}

.small-button {
  width: 40px;
  height: 40px;
}

.no-border {
  border: none;
}

.close {
  color: red;
  left: 30px;
  bottom: 20px;
}

.accept {
  color: lime;
  right: 30px;
  top: 25px;
}

.login-button {
  position: relative;
  font-size: 26px;
  border-radius: 100%;
  outline: none;
  transition: 0.4s;
}

.login-button:hover,
.login-button:focus,
.login-button:active {
  background: rgb(127, 127, 255);
  color: white;
}

.shadow {
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5), 0px 0px 4px rgba(0, 0, 0, 0.5);
}

* {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
body {
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.center {
  text-align: center;
}

.login-title {
  position: relative;
  bottom: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
  <h1>Foo Bar</h1>
  <input class="shadow no-border big-button" type="button" value="Login" onclick="showLogin();">
</div>
<div id="loginBackground" style="opacity: 0; display: none;"></div>
<div id="login" style="opacity: 0; display: none;" class="shadow" action="https://example.com">
  <h3 class="login-title">Login to Foo Bar</h3>
  <input placeholder="Username or Email" id="u" class="login shadow no-border" type="textbox"><br/>
  <input placeholder="Password" id="p" class="login shadow no-border" type="password"><br/>
  <input class="shadow no-border small-button accept login-button" type="button" onclick="hideLogin(); login(); " value="&#10003;"><br/>
  <input class="shadow no-border small-button close login-button" type="button" onclick="hideLogin(); " value="&cross;">
</div>

如何使用纯Javascript制作锁屏并输入密码以解锁？

2 个答案: