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

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

javascript

如何制作锁屏并输入密码以使用纯Javascript解锁？,javascript,Javascript,我想做一个锁屏，当我点击一个按钮，一个需要输入密码的显示。我设置了一个密码，当输入一个有效的密码并按enter键时，锁屏消失了。谢谢你们这是我的演示：目前还没有使用纯JavaScript制作锁屏的方法！你可以制作一个人工的证书，将证书存储在自己的内部，但是黑客可以很容易地查看代码并获取用户名/密码，从而使其不安全真正实现这一点的唯一方法是使用服务器端语言（如PHP、Node.js）和web语言（如JavaScript）。不过，要做到这一点，您需要设置一个（或多个）存储凭据的服务器，然后将用

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

这是我的演示：

目前还没有使用纯JavaScript制作锁屏的方法！你可以制作一个人工的证书，将证书存储在自己的内部，但是黑客可以很容易地查看代码并获取用户名/密码，从而使其不安全

真正实现这一点的唯一方法是使用服务器端语言（如PHP、Node.js）和web语言（如JavaScript）。不过，要做到这一点，您需要设置一个（或多个）存储凭据的服务器，然后将用户的输入发送到服务器，并让服务器检查以确保其正确性。这样，客户端就不会存储密码，其他人也无法找到。（只要你能很好地保护你的服务器并正确编码。）

你可以很容易地创建表单输入等。但是你必须托管你的服务器来存储所有凭据，并将凭据（哈希）发送到服务器

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

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

函数showLogin（）{
//.show（）不适用于转换
美元（“#u，#p”）.val（“”）；
$（“#login”）.show（）.css（“不透明度”，“1”）；
$（“#loginBackground”）.show（）.css（“不透明度”，“0.5”）；
}
函数hideLogin（）{
//.hide（）不适用于转换，
//但用户交互需要它
//后面有东西。
$（“#login，#loginBackground”）.css（“不透明”，“0”）.hide（）；
}
函数登录（）{
var username=$（“#u”）.val（）；
var password=$（“#p”）.val（）；
//在这里做点什么！
}

输入{
边界半径：5px；
背景：白色；
边框：实心1px黑色；
高度：20px；
利润上限：3倍；
边缘底部：2px；
宽度：200px；
}
h1，
h2，
h3，
h4，
h5，
h6{
边际上限：0px；
边缘底部：0px；
填充顶部：0px；
垫底：0px；
}
.大按钮{
高度：50px；
填充：0px；
}
.登录{
左侧填充：5px；
右侧填充：5px；
宽度：188px；
}
输入[type=“button”]，
输入[type=“submit”]，
钮扣{
光标：指针；
}
#登录{
过渡：0.2s；
边界半径：5px；
位置：固定；
背景：白色；
文本对齐：居中；
填充顶部：50px；
填充底部：50px；
顶部：8px；
左：50%；
宽度：300px；
左边距：-150px；
高度：150像素；
z指数：10000；
}
#登录背景{
过渡：0.2s；
背景色：黑色；
不透明度：0.5；
宽度：100%；
位置：固定；
顶部：0px；
左：0px；
身高：100%；
边际：0px；
z指数：9999；
}
.小按钮{
宽度：40px；
高度：40px；
}
没有边界{
边界：无；
}
.结束{
颜色：红色；
左：30px；
底部：20px；
}
.接受{
颜色：青柠；
右：30px；
顶部：25px；
}
.登录按钮{
位置：相对位置；
字号：26px；
边界半径：100%；
大纲：无；
过渡：0.4s；
}
.登录按钮：悬停，
.登录按钮：焦点，
.登录按钮：活动{
背景：rgb（127127255）；
颜色：白色；
}
.影子{
盒影：4px4p3pRGBA（0,0,0,0.5），0px 0px 4pxRGBA（0,0,0,0.5）；
}
* {
文本阴影：0px 0px 4px rgba（0,0,0,0.7）；
}
h1，
h2，
h3，
h4，
h5，
h6，
P
跨度
分区，
身体{
文本阴影：4px4p3pRGBA（0,0,0,0.2），0px 0px 4pxRGBA（0,0,0,0.5）；
}
.中心{
文本对齐：居中；
}
.登录名{
位置：相对位置；
底部：14px；
}


富吧
登录foobar

请分享您尝试实现此目的的代码。所以这不是编码服务，谢谢！请注意，您无法为设备创建真正的锁定屏幕，沙盒浏览器选项卡没有所需的权限。欢迎使用Stackoverflow，请阅读。特别注意。确保用正确的标签（编程语言、相关技术等）标记问题。你在发布一个好的问题上投入的精力越多：一个容易阅读、理解的问题，而且这个问题越容易吸引相关的人，你得到帮助的速度就越快。祝你好运还有什么我能帮你的吗？我觉得你的问题还没有得到回答，因为没有人知道你在寻找什么样的答案。如果你有什么特别需要的，请告诉我！我很乐意帮忙！：）请停止在您的帖子中添加噪音，并阅读相关内容。问候语和诸如“我希望这有帮助”之类的语句在这里被视为噪音，因为它们实际上并不构成问题答案的一部分。谢谢，我只想在我键入之前创建的密码时解除锁定屏幕。我不想让它像使用服务器那样复杂，诸如此类的事情。密码只是在变量中声明的。

<!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';
})