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

今天我將使用 HTML、CSS 和 JavaScript 制作隨機密碼生成器

🎼 寫在前面的

隨機密碼生成器 是一個簡單的 JavaScript 應用程式，可以自動生成密碼，這種型別的應用程式使用各種數字、符號、字母等來創建比較復雜，安全性較高的密碼，

在本文中，我將向您展示如何使用 HTML、CSS 和 JavaScript 代碼輕松構建隨機密碼生成器系統，我在這里沒有使用任何JQuery 插件或JavaScript 庫，我已經創建了更多型別的 JavaScript 專案（Web 元素和應用程式），

但是，這是我第一次制作這樣的隨機密碼生成器，我使用 JavaScript 的Math.floor 和Math.random 方法來創建它，我在這個密碼中添加了數字、不同的符號和字母，這里我們使用了不同型別的回圈，每次都會創建不同的密碼，

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

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

在這里，您將找到所需的源代碼：
https://download.csdn.net/download/qq_44273429/20719188

您可以在專案中復制和使用這些源代碼，如果您是初學者，那么您必須按照下面的教程了解我是如何制作的，

🎯 如何構建隨機密碼生成器

首先，您創建一個 HTML 檔案(index.html)和一個 CSS 檔案(index.css)，這里我沒有單獨創建任何 JavaScript 檔案（index.js），但是，您可以根據需要創建單獨的 JavaScript 檔案，

🎬 第 1 步：在網頁中創建一個框

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

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

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

HTML

<h2>海擁 | 隨機密碼生成器</h2>

CSS

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

效果展示：

🥇 第 3 步：使用輸入創建顯示

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

HTML

<input type="text" name="" placeholder="創建密碼" 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 創建兩個按鈕

我做了以下兩個按鈕來生成和復制密碼，并將這兩個按鈕的高度設定為 50 px ，寬度設定為 150 px，使用了背景顏色藍色和文本顏色白色，我使用margin-left: 85px來創建兩個按鈕之間的距離，

HTML

<table>
   <th><div id="button" class="btn1"onclick="genPassword()">生成</div></th>
   <th><a  id="button" class="btn2" onclick="copyPassword()">復制</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 代碼激活密碼生成器

到目前為止，我們只設計了它的外觀樣式，接下來我們將在 JavaScript 的幫助下使其動起來，首先我設定了一個密碼變數(input id)，現在我們將使用函式 genPassword使這個系統功能，

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

在 varchars 中，我添加了不同的數字、數字、符號等，這些相互關聯的符號和數字將創建隨機密碼，

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

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

這里的 Math.random() 方法將幫助創建一個隨機密碼，

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

最后，我會在輸入框中顯示這個密碼，我使用了輸入的 ID 密碼并設定了該 ID 的常量，現在我通過該常量在輸入框中顯示上述條件，

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

現在我將使設計中的復制按鈕生效，正如您之前看到的，有一個選項可以單擊將復制所有密碼，此復制按鈕直接連接到該輸入，輸入框中輸入的任何內容都將在該復制按鈕的幫助下進行復制，

同樣，現在我們已經確定了輸入框的ID變數，然后我使用document.execCommand激活按鈕，

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

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

最終完整的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");
}

完整的源代碼：

https://download.csdn.net/download/qq_44273429/20719188

🛬 wuhu ! 起飛 !

希望通過本文，您已經學會了如何使用 HTML、CSS 和 JavaScript 制作的隨機密碼生成器，我之前使用 HTML、CSS 和 JavaScript 制作了更多型別的小工具，如果您愿意，可以查看這個設計，

使用 HTML、CSS、JS 和 API 制作一個很棒的天氣 Web 應用程式

我已經寫了很長一段時間的技術博客，并且主要通過CSDN發表，這是我的一篇 Web 應用程式教程，我喜歡通過文章分享技術與快樂，您可以訪問我的博客： https://haiyong.blog.csdn.net/ 以了解更多資訊，希望你們會喜歡！😊

💌 歡迎大家在評論區提出意見和建議！💌

如果你真的從這篇文章中學到了一些新東西，喜歡它，收藏它并與你的小伙伴分享，🤗最后，不要忘了?或📑支持一下哦，