文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用纯Javascript制作锁屏并输入密码解锁？

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

Stack Overflow用户

提问于 2019-06-29 11:39:51

回答 2查看 3.2K关注 0票数 2

我想做一个锁定屏幕，当我点击一个按钮时，输入密码就会出现。我设置了一个密码，当输入一个有效的密码并按回车键时，锁屏消失。谢谢你们！

这是我的演示：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';
})

javascript

回答 2

Stack Overflow用户

发布于 2019-06-29 13:29:54

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

当你想检查它是否有效时，只需将你输入的密码散列，并将其发送到服务器，然后如果服务器说它与存储的密码匹配，则让它们通过。

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

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>

票数 2

Stack Overflow用户

发布于 2019-06-29 12:22:35

目前还没有可能使用纯JavaScript制作锁定屏幕的方法！您可以创建一个在其内部存储凭据的人工凭据，但黑客可以很容易地在代码中查看并获得用户名/密码，因此使其不安全。

真正做到这一点的唯一方法是使用服务器端语言(如PHP、Node.js)和web语言(如JavaScript)。不过，要做到这一点，您需要设置一个(或多个)服务器来存储凭据，然后将用户的输入发送到服务器，并让服务器进行检查以确保它们是正确的。这样客户端就不会存储密码，使得其他人不可能找到它。(只要您能够很好地保护您的服务器并正确编写代码。)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56814910

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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