如何使用HTML、CSS和JS制作隨機(jī)密碼生成器

這篇文章主要介紹如何使用HTML、CSS和JS制作隨機(jī)密碼生成器，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

使用HTML、CSS和JavaScript制作的隨機(jī)密碼生成器

寫在前面的

隨機(jī)密碼生成器 是一個簡單的JavaScript應(yīng)用程序，可以自動生成密碼。這種類型的應(yīng)用程序使用各種數(shù)字、符號、字母等來創(chuàng)建比較復(fù)雜，安全性較高的密碼。

在本文中，我將向您展示如何使用HTML、CSS和JavaScript代碼輕松構(gòu)建隨機(jī)密碼生成器系統(tǒng)。我在這里沒有使用任何JQuery插件或JavaScript庫。

但是，這是我第一次制作這樣的隨機(jī)密碼生成器。我使用JavaScript的Math.floor和Math.random方法來創(chuàng)建它。我在這個密碼中添加了數(shù)字、不同的符號和字母。這里我們使用了不同類型的循環(huán)，每次都會創(chuàng)建不同的密碼。

如上圖所示，我首先將網(wǎng)頁的背景涂成藍(lán)色。然后我在那個頁面上做了一個小盒子。首先，我在那個框中添加了一個文本。下面是一個可以生成密碼的小顯示或輸入。我還在底部做了兩個按鈕。這些按鈕之一將生成密碼，另一個將復(fù)制密碼。

下面是一個現(xiàn)場演示，可幫助您了解它（JavaScript 密碼生成器）的工作原理：http://haiyong.site/random-password-generator

您可以在項(xiàng)目中復(fù)制和使用這些源代碼。如果您是初學(xué)者，那么您必須按照下面的教程了解我是如何制作的。

如何構(gòu)建隨機(jī)密碼生成器

首先，您創(chuàng)建一個HTML文件(index.html)和一個CSS文件(index.css)。這里我沒有單獨(dú)創(chuàng)建任何JavaScript文件（index.js）。但是，您可以根據(jù)需要創(chuàng)建單獨(dú)的JavaScript文件。

第 1 步：在網(wǎng)頁中創(chuàng)建一個框

這個盒子是在每個人的第一個網(wǎng)頁上創(chuàng)建的。將使用以下HTML和CSS代碼創(chuàng)建。這里我使用了#0581ca的背景色。如果需要，你可以使用任何其他背景顏色。我使用白色作為盒子的背景色。在這種情況下，我們沒有指定盒子的具體高度或大小，這將取決于內(nèi)容的數(shù)量。

HTML

<div class="box"> </div>

CSS

* {
	margin: 0;
	padding: 0;
	user-select: none;
	box-sizing: border-box;
}

body {
	background-color: #0581ca;
	justify-content: center;
	align-items: center;
	display: flex;
	min-height: 100vh;
}

.box{
	background-color: white;
	padding-top: 30px;
	padding: 30px;
}

效果展示

第 2 步：添加 heading 或 title

現(xiàn)在我們將向該框添加標(biāo)題。為此，我使用了以下HTML和CSS代碼。我已將此標(biāo)題的字體大小用26px，顏色用#015a96。使用text-align: center將文本放在框的中間。

HTML

<h3>海擁 | 隨機(jī)密碼生成器</h3>

CSS

.box h3{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: #015a96;
  font-family: sans-serif;
}

效果展示

第 3 步：使用輸入創(chuàng)建顯示

我使用輸入做了一個小顯示器，將看到每次生成不同密碼的位置。我使用了這個input的高度50px和寬度400px。使用了border-radius: 6px使它稍微變圓。使用的邊框：border: 2px solid rgb (13, 152, 245)使其更亮。

HTML

<input type="text" name="" placeholder="創(chuàng)建密碼" id="password" readonly>

CSS

input {
  padding: 20px;
  user-select: none;
  height: 50px;
  width: 400px;
  border-radius: 6px;
  border: none;
  border: 2px solid rgb(13, 152, 245);
  outline: none;
  font-size: 22px;
    }
input::placeholder{
  font-size: 23px;
  }

效果展示：

第 4 步：使用 Html 和 CSS 創(chuàng)建兩個按鈕

我做了以下兩個按鈕來生成和復(fù)制密碼，并將這兩個按鈕的高度設(shè)置為50px ，寬度設(shè)置為150px。使用了背景顏色藍(lán)色和文本顏色白色。我使用margin-left: 85px來創(chuàng)建兩個按鈕之間的距離。

HTML

<table>
   <th><div id="button" class="btn1"onclick="genPassword()">生成</div></th>
   <th><a  id="button" class="btn2" onclick="copyPassword()">復(fù)制</a></th>
</table>

CSS

#button {
	font-family: sans-serif;
	font-size: 15px;
	margin-top: 40px;
	border: 2px solid rgb(20, 139, 250);
	width: 155px;
	height: 50px;
	text-align: center;
	background-color: #0c81ee;
	display: flex;
	color: rgb(255, 255, 255);
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 7px;
}
.btn2{
	margin-left: 85px;
}
#button:hover {
	color: white;
	background-color: black;
}

效果展示：

第 5 步：使用 JavaScript 代碼激活密碼生成器

到目前為止，我們只設(shè)計了它的外觀樣式，接下來我們將在JavaScript的幫助下使其動起來。首先我設(shè)置了一個密碼變量(input id)。現(xiàn)在我們將使用函數(shù)genPassword使這個系統(tǒng)功能。

JavaScript

var password=document.getElementById("password");

在 varchars 中，我添加了不同的數(shù)字、數(shù)字、符號等。這些相互關(guān)聯(lián)的符號和數(shù)字將創(chuàng)建隨機(jī)密碼。

我已經(jīng)使用var passwordLength確定了密碼的數(shù)量。在這里，我使用了 12，它每次都會創(chuàng)建一個包含13 (12 + 1) 個字符的密碼。您可以根據(jù)需要變換數(shù)值

JavaScript

function genPassword() {
   var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   var passwordLength = 12;
   var password = "";

這里的Math.random()方法將幫助創(chuàng)建一個隨機(jī)密碼。

JavaScript

for (var i = 0; i <= passwordLength; i++) {
	var randomNumber = Math.floor(Math.random() * chars.length);
	password += chars.substring(randomNumber, randomNumber +1);
}

最后，我會在輸入框中顯示這個密碼。我使用了輸入的 ID 密碼并設(shè)置了該 ID 的常量?，F(xiàn)在我通過該常量在輸入框中顯示上述條件。

JavaScript

document.getElementById("password").value = password;

現(xiàn)在我將使設(shè)計中的復(fù)制按鈕生效。正如您之前看到的，有一個選項(xiàng)可以單擊將復(fù)制所有密碼。此復(fù)制按鈕直接連接到該輸入。輸入框中輸入的任何內(nèi)容都將在該復(fù)制按鈕的幫助下進(jìn)行復(fù)制。

同樣，現(xiàn)在我們已經(jīng)確定了輸入框的ID變量。然后我使用document.execCommand激活按鈕。

JavaScript

function copyPassword() {
	var copyText = document.getElementById("password");
	copyText.select();
	copyText.setSelectionRange(0, 999);
	document.execCommand("copy");
}

到此就大功告成了，你所需要做的就是復(fù)制粘貼就可以

最終完整的 JavaScript 代碼：

var password=document.getElementById("password");
   function genPassword() {
   var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   var passwordLength = 12;
   var password = "";
   for (var i = 0; i <= passwordLength; i++) {
      var randomNumber = Math.floor(Math.random() * chars.length);
      password += chars.substring(randomNumber, randomNumber +1);
    }
      document.getElementById("password").value = password;
    }
  function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  copyText.setSelectionRange(0, 999);
  document.execCommand("copy");
}

以上是“如何使用HTML、CSS和JS制作隨機(jī)密碼生成器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！