如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？-js教程-PHP中文网

如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？

WBOY

发布： 2023-09-07 14:33:02

转载

1158人浏览过

如何仅使用 html、css 和 javascript 来密码保护页面？

对于包含敏感信息或需要身份验证才能访问的网页，密码保护是一项重要的安全措施。如果您想在不使用服务器端语言的情况下为网页添加额外的安全性，则可以使用 HTML、CSS 和 JavaScript 来密码保护页面。

本文将向您展示如何创建一个简单的表单，要求用户输入密码才能查看受保护页面的内容。让我们看看以下示例，以便更好地了解使用密码保护页面。

示例

在下面的示例中，我们正在运行脚本并保护网页；如果用户尝试访问该网页，则会提示他们输入密码。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var password = "tutorial";
         (function passcodeprotect() {
            var passcode = prompt("Enter PassCode");
            while (passcode !== password) {
               alert("Incorrect PassCode");
               return passcodeprotect();
            }
         }());
         alert('Welcome To The TP..!');
      </script>
   </body>
</html>

登录后复制

执行脚本时，它将生成一个输出，显示一条要求输入密码的警报。当用户匹配密码（“教程”）时，会显示一条消息；否则，网页上会显示错误的密码。

立即学习“Java免费学习笔记（深入）”；

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

示例

考虑以下示例，我们为输入的密码创建一个输入字段，以保护网页以及单击按钮。

<!DOCTYPE HTML>
<html>
   <body>
      <center>
         <input type="password" placeholder="passcode" id="tutorial">
         <button onclick="protectpasscode()">CHECK</button>
         <script>
            function protectpasscode() {
               const result = document.getElementById("tutorial").value;
               let passcode = 12345;
               let space = '';
               if (result == space) {
                  alert("Type passcode")
               } else {
                  if (result == passcode) {
                     document.write("<center><h1>TP, The Best E-Learning </h1></center>");
                  } else {
                     alert("Incorrect Passcode");
                     location.reload();
                  }
               }
            }
         </script>
      </center>
   </body>
</html>

登录后复制

运行上述脚本时，将弹出输出窗口，显示用于输入密码的输入字段以及网页上的单击按钮。如果用户匹配密码（12345），它将打开由文本组成的表单；否则，将显示错误的密码。

示例

执行下面的示例，我们在其中运行脚本以保护网页在执行脚本后不显示其内容。

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1">
      Enter Password:
      <input type='text' value='' id='input'><br><br>
      <input type='checkbox' onclick='protectpasscode()'>Show results
      <p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
      cricketer who was captain of the Indian national cricket team in limited-overs formats
      from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
      <script>
         function protectpasscode() {
            var a = document.getElementById('input');
            var b = document.getElementById('tutorial');
            if (a.value === '54') {
               b.style.display = 'block';
            } else {
               b.style.display = 'none';
            }
         }
      </script>
   </body>
</html>

登录后复制

执行脚本时，它将生成一个输出，显示用于输入密码的输入字段和网页上的切换复选框。当用户匹配密码（54）并切换复选框时，就会显示网页内的内容。

以上就是如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？的详细内容，更多请关注php中文网其它相关文章！