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

永和網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

寫在前面的

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

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

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

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

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

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

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

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

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

這個(gè)盒子是在每個(gè)人的第一個(gè)網(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)建顯示

我使用輸入做了一個(gè)小顯示器，將看到每次生成不同密碼的位置。我使用了這個(gè)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)建兩個(gè)按鈕

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

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è)計(jì)了它的外觀樣式，接下來我們將在JavaScript的幫助下使其動(dòng)起來。首先我設(shè)置了一個(gè)密碼變量(input id)。現(xiàn)在我們將使用函數(shù)genPassword使這個(gè)系統(tǒng)功能。

JavaScript

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

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

現(xiàn)在我將使設(shè)計(jì)中的復(fù)制按鈕生效。正如您之前看到的，有一個(gè)選項(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)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：如何使用HTML、CSS和JS制作隨機(jī)密碼生成器
當(dāng)前路徑：http://www.chinadenli.net/article36/pgsppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)建站、做網(wǎng)站、網(wǎng)站制作、用戶體驗(yàn)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)