如何用HTML、CSS和JavaScript建立一个随机密码生成器应用程序

DebugUsery
181 阅读6分钟

如何用HTML、CSS和JavaScript构建一个随机密码生成器应用

密码生成器是一个可以为你自动生成密码的应用程序。这些生成的密码是由字母、数字和符号组成的。这个应用程序可以帮助用户创建一个可靠的密码，不容易被猜到或被暴力破解。

在这篇文章中，我们将学习如何用HTML、CSS和JavaScript建立一个随机密码生成器应用程序。

password generator app

前提条件

读者应该具备。

  • 具有HTML、CSS的基本知识。
  • 对JavaScript有基本了解，包括函数。

建立密码生成器的HTML页面

让我们首先创建一个HTML文件，并将其保存为index.html 。

将以下代码复制到HTML文件中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PASSWORD GENERATOR APP</title>
    <link rel="stylesheet" href="layout.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <form id="passwordGeneratorForm">
      <div class="container">
        <h2>Password Generator Application</h2>
        <div class="result__container">
        <span id="result"></span>
        <button id="copy">Copy</button>
      </div>
      <div class="options">
        <div class="option">
          <label>Length</label>
          <input type="number" id="length" min="4" max="20" value="10">
        </div>
        <div class="option">
          <label>Include Uppercase</label>
          <input type="checkbox" id="uppercase" checked>
        </div>
        <div class="option">
          <label>Include Numbers</label>
          <input type="checkbox" id="numbers" checked>
        </div>
        <div class="option">
          <label>Include Symbols</label>
          <input type="checkbox" id="symbols" checked>
        </div>
      </div>
      <button class="btn" id="generate" type="submit">Generate Password</button>
      </div>
    </form>
  </body>
</html>

现在，让我们创建一个文件并将其保存为layout.css 。这是你将为应用程序编写所有CSS的地方。

下面是该应用程序的CSS。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Oswald', sans-serif;
  background-color: #39378f;
}
 
.container {
  padding: 1rem 1.5rem;
  border: 1px solid black;
  width: 350px;
  background-color: #4abd15;
}
 
h2 {
  text-align: center;
  padding: 15px 0;
}
 
 
.option {
  display: flex;
  justify-content: space-between;
  padding: 4px;
}
.result__container {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
  padding: 0 5px;
}
 
.result-container #result {
  word-wrap: break-word;
  max-width: calc(100% - 40px);
}
 
.result__container #copy {
  height: 40px;
  width: 40px;
  background-color: #eb1606;
  color: #ffffff;
  border: none;
  cursor: pointer;
  outline: none;
}
 
.result__container #copy:hover {
  background-color: #1c2541;
  color: #ffffff;
}
 
#generate {
  height: 40px;
  width: 100%;
  border-radius: 10px;
  border: none;
  background-color: #0b132b;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}
 
#generate:hover {
  background-color: #5bc0be;
  color: #ffffff;
}

了解ASCII字符表

我不建议你在没有事先了解ASCII字符的情况下就直接对JavaScript文件进行编码。

下面是ASCII字符的表格。

ascii-table

图片来源

ASCII是美国信息交换标准代码的缩写。如果你看一下大写字母A，它的ASCII值是65，如果你继续在65上加一，你将得到所有26个大写字母。小写字母从97开始，一直到122。这些符号在上图中的不同位置。

编写Javascript

选择DOM元素

首先，使用下面的代码在JavaScript中选择不同的HTML DOM元素。

// Getting the DOM Elements
const resultDOM = document.getElementById("result");
const copybtnDOM = document.getElementById("copy");
const lengthDOM = document.getElementById("length");
const uppercaseDOM = document.getElementById("uppercase");
const numbersDOM = document.getElementById("numbers");
const symbolsDOM = document.getElementById("symbols");
const generatebtn = document.getElementById("generate");
const form = document.getElementById("passwordGeneratorForm");

生成字符代码

接下来，让我们研究一下我们将用来形成随机生成的密码的字符代码。对于大写字母代码，你将通过低值65，即大写字母A的值和高值90，即大写字母Z，你可以从ASCII表中回忆。

对于小写字母和数字，你也要这样做。但生成符号的字符代码是不同的，因为它们被分配在ASCII表的各个地方。

使用concat 函数将它们合并成一个数组。这个函数是JavaScript中的一种方法，它允许将字符串和数组连接起来。符号从33开始，一直增加到47，然后继续到58。

// Generating Character Codes For The Application
const UPPERCASE_CODES = arrayFromLowToHigh(65, 90);
const LOWERCASE_CODES = arrayFromLowToHigh(97, 122);
const NUMBER_CODES = arrayFromLowToHigh(48, 57);
const SYMBOL_CODES = arrayFromLowToHigh(33, 47)
  .concat(arrayFromLowToHigh(58, 64))
  .concat(arrayFromLowToHigh(91, 96))
  .concat(arrayFromLowToHigh(123, 126));

该函数arrayFromLowToHigh ，将接受两个输入，一个是最高值，另一个是最低值。它只是递增，直到达到最高值。

所有递增的值都被推送到一个数组中，然后该函数返回数组，你所做的就是生成字符代码的函数。

// Character Code Generating Function
function arrayFromLowToHigh(low, high) {
  const array = [];
  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
}

生成密码

接下来，我们来创建密码生成函数。

// The Password Generating Function
let generatePassword = (
  characterAmount,
  includeUppercase,
  includeNumbers,
  includeSymbols
) => {
  let charCodes = LOWERCASE_CODES;
  if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CODES);
  if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CODES);
  if (includeNumbers) charCodes = charCodes.concat(NUMBER_CODES);
  const passwordCharacters = [];
  for (let i = 0; i < characterAmount; i++) {
    const characterCode =
      charCodes[Math.floor(Math.random() * charCodes.length)];
    passwordCharacters.push(String.fromCharCode(characterCode));
  }
  return passwordCharacters.join("");
};

例如，如果用户希望密码是小写的，如果没有勾选任何选项，在函数里面，我们将创建一个变量，存储一个字符代码数组，并分配小写字符代码。

之后，你将需要通过使用条件语句来检查选项是否为真。现在，根据所选的选项，你将把这些值串联到charCodes 变量中，用于它将创建的密码。然后，创建一个空数组并将其称为passwordCharacters 。

接下来，创建一个循环，循环直到达到你想要的字符数。在循环中，从charCodes 数组中的可用值中生成随机字符代码。然后从字符代码中转换字符，并将其推入passwordCharacters 。

现在，循环直到你得到的字符数量来自应用程序的输入字段。charCodes 变量中有所有的字符代码，这都取决于用户选择的选项。

现在，通过使用math.random() 方法生成一个数组的随机索引位置，并与charCodes.length 相乘，以限制其生成最高索引位置以下的数字。接下来，使用Math.floor ，将生成的数字进行下限，这将完成生成的数字。

然后，String.fromCharCode(characterCode) 将从字符代码中生成字符串，passwordCharacters.push() 将字符推到数组中，return passwordCharacters.join(“) 将数组转换为字符串并返回。

复制按钮

接下来，你要做的是建立copy 按钮和复制到剪贴板的功能。我们将监听copybtnDOM 元素上的点击事件。同时，在该函数内部，你将使用JavaScript中的createElement 方法创建一个textarea 元素。

// Copy password button
 
copybtnDOM.addEventListener("click", () => {
  const textarea = document.createElement("textarea");
  const passwordToCopy = resultDOM.innerText;
  // A Case when Password is Empty
  if (!passwordToCopy) return;
  // Copy Functionality
  textarea.value = passwordToCopy;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();
  alert("Password Copied to Clipboard");
});

在上面的代码中，对于const textarea = document.createElement(‘textarea’) ，你只是创建了一个持有textarea DOM元素的变量。你可以使用resultDOM.innerText 来获取textarea的值。

然后，if (!passwordToCopy) return; ，意味着如果passwordToCopy 变量是空的，我们应该什么都不做。textarea.value = passwordToCopy 语法是用来将textarea 的值设置为你想复制的值。

接下来是document.body.appendchild(textarea); ，你在这里要做的是将文本区的值追加到你的文档正文中。append child方法将一个节点添加到指定父节点的子节点列表的末尾。

你需要选择你想复制的元素，所以你将使用textarea.select(); 方法，然后复制这些元素，你将使用document.execCommand(‘copy’); 方法。这个方法对可编辑部分的选定部分执行指定的命令，该部分是文本区域。

函数中的copy 命令将复制可编辑部分的值，之后你需要通过使用textarea.remove(); 删除textarea 。这将给用户一个通知，即密码被成功复制了。

之后，你将为其编码一个 "简单的警报"，以显示alert(‘password copied to clipboard’) 函数。写好了这些，应用程序还不能生成随机密码，因为你还没有完成实现创建随机密码的功能。

把这一切放在一起

如果你点击复制按钮，你会观察到页面一直在重新加载。你应该通过使用一个叫做preventDefault 的事件API来禁用这种重载行为。这个方法将确保默认行为即提交表单时的重载行为不影响页面。

你可以使用下面的代码来实现这个目的。

// Checking the options that are selected and setting the password
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const characterAmount = lengthDOM.value;
  const includeUppercase = uppercaseDOM.checked;
  const includeNumbers = numbersDOM.checked;
  const includeSymbols = symbolsDOM.checked;
  const password = generatePassword(
    characterAmount,
    includeUppercase,
    includeNumbers,
    includeSymbols
  );
  resultDOM.innerText = password;
});

在上面的代码中，你采取的第一步是使用函数e.preventDefalult(); ，禁用提交表单时重新加载页面的默认行为。你正在监听提交事件。

你可以通过使用.value getter方法访问密码字段里面的值，该方法返回输入值。你也可以使用.checked getter，如果复选框被选中或未被选中，它将返回true。如果复选框没有被选中，它将返回false。

我们将创建一个名为password 的变量。这个变量将存储由generatePassword 函数返回的值。generatePassword 函数需要四个参数，分别是characterAmount,includeUppercase,includeNumbers, 和includeSymbols 。最后，innerText 方法将以resultDOM 内的文本为目标，然后用生成的密码来改变它。

现在，如果你运行这些代码，我们的随机密码生成器应用程序应该工作得很好。我们已经成功地建立了我们的密码生成器应用程序。

结论

构建随机密码生成器应用程序还有许多其他方法。本教程只是实现它的一种方法。你也可以研究不同的创建方法，只要它能执行相同的功能。

avatar
文章
阅读
粉丝