HTML、CSS、JS を使用してランダムなパスワード ジェネレーターを作成する方法を教えます (共有)

前回の記事「基本：JSを使ってかっこいい黒のアナログ時計を作る方法（コード付き）」では、JSを使ってアナログ時計を作る方法を紹介しました。次の記事では、HTML、CSS、JS を使用してランダムなパスワードを生成する方法を紹介しますので、見てみましょう。

#HTML、CSS、JavaScript を使用して作成されたランダム パスワード ジェネレーター

先頭に # を書いてください

##ランダム パスワード ジェネレーターは、パスワードを自動的に生成するシンプルな

JavaScript

アプリケーションです。このタイプのアプリケーションは、さまざまな数字、記号、文字などを使用して、より複雑で安全なパスワードを作成します。 この記事では、

HTML

、CSS、JavaScript コードを使用してランダム パスワード生成システムを簡単に構築する方法を説明します。ここでは JQuery プラグインや JavaScript ライブラリを使用していません。 しかし、このようなランダムパスワードジェネレーターを作成するのはこれが初めてです。

JavaScript

の Math.floor メソッドと Math.random メソッドを使用して作成しました。このパスワードに数字、さまざまな記号、文字を追加しました。ここでは異なるタイプのループを使用し、毎回異なるパスワードを作成します。 上の図に示すように、最初に Web ページの背景を青に塗りました。それから私はそのページに小さなボックスを作りました。まず、そのボックスにテキストを追加しました。以下は、パスワードを生成できる小さな表示または入力です。下部にもボタンを2つ作りました。これらのボタンの 1 つはパスワードを生成し、もう 1 つはパスワードをコピーします。

これは (JavaScript パスワード ジェネレーター) がどのように機能するかを理解するのに役立つライブ デモです: http://haiyong.site/random-password-generator

#Youこれらのソース コードをコピーしてプロジェクト内で使用できます。あなたが初心者の場合は、以下のチュートリアルに従って、私がどのように作成したかを確認する必要があります。

ランダム パスワード ジェネレーターを構築する方法

まず、

HTML

ファイル (

index.html) と CSS ファイル (##) を作成します。 #index.css)。ここでは、JavaScript ファイル (index.js) を個別に作成しませんでした。ただし、必要に応じて、別の JavaScript ファイルを作成できます。 ステップ 1: Web ページにボックスを作成するこのボックスは、誰にとっても最初の Web ページに作成されます。次の

HTML

および

CSS

コードを使用して作成されます。ここでは背景色 #0581ca を使用しました。必要に応じて、他の背景色を使用できます。ボックスの背景色として白を使用しました。この場合、ボックスの特定の高さやサイズは指定しておりません。内容物の量によって異なります。 HTML<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;box&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></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: 見出しまたはタイトルを追加する

次に、ボックスにタイトルを追加します。これを行うために、次の

HTML

および

CSS

コードを使用しました。このタイトルにはフォント サイズ 26px と色 #015a96 を使用しました。 text-align: center を使用して、テキストをボックス内の中央に配置します。 HTML<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;h2 id=&quot;海拥-nbsp-nbsp-随机密码生成器&quot;&gt;海拥 | 随机密码生成器&lt;/h2&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>CSS

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

エフェクト表示

ステップ 3: input を使用して表示を作成する

入力を使用して、毎回異なるパスワードが生成される場所を確認する小さな表示を作成しました。この

input

を高さ

50px

、幅 400px で使用しました。 border-radius: 6px を使用して、少し丸くしました。使用するボーダー: ボーダー: 2px ソリッド rgb (13, 152, 245)明るくします。 HTML<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;input type=&quot;text&quot; name=&quot;&quot; placeholder=&quot;创建密码&quot; id=&quot;password&quot; readonly&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>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 を使用して 2 つを作成しますボタン

パスワードを生成およびコピーするために次の 2 つのボタンを作成し、これら 2 つのボタンの高さを

50px

、幅を

150px

に設定しました。背景色は青、文字色は白を使用します。 margin-left: 85px を使用して 2 つのボタン間の距離を作成します。 HTML<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;th&gt;&lt;div id=&quot;button&quot; class=&quot;btn1&quot;onclick=&quot;genPassword()&quot;&gt;生成&lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;a id=&quot;button&quot; class=&quot;btn2&quot; onclick=&quot;copyPassword()&quot;&gt;复制&lt;/a&gt;&lt;/th&gt; &lt;/table&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>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使这个系统功能。

JavaScript

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

在 varchars 中，我添加了不同的数字、数字、符号等。这些相互关联的符号和数字将创建随机密码。

我已经使用var passwordLength确定了密码的数量。在这里，我使用了 12，它每次都会创建一个包含13 (12 + 1) 个字符的密码。您可以根据需要变换数值

JavaScript

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

这里的Math.random()方法将帮助创建一个随机密码。

JavaScript

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

最后，我会在输入框中显示这个密码。我使用了输入的 ID 密码并设置了该 ID 的常量。现在我通过该常量在输入框中显示上述条件。

JavaScript

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

现在我将使设计中的复制按钮生效。正如您之前看到的，有一个选项可以单击将复制所有密码。此复制按钮直接连接到该输入。输入框中输入的任何内容都将在该复制按钮的帮助下进行复制。

同样，现在我们已经确定了输入框的ID变量。然后我使用document.execCommand激活按钮。

JavaScript

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");
}

推荐学习：HTML/CSS视频教程、JS视频教程

以上がHTML、CSS、JS を使用してランダムなパスワード ジェネレーターを作成する方法を教えます (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。