手把教你使用HTML、CSS和JS制作随机密码生成器(分享)

lxf2023-02-16 15:30:03

在之前的文章《初级文章:如何用JS制作酷黑模拟时钟(附代码)》中,介绍了如何用JS制作模拟时钟。下面的文章将介绍如何使用HTML、CSS和JS制作随机密码生成器,伙伴们来看看。

手把教你使用HTML、CSS和JS制作随机密码生成器(分享)

使用HTML、随机密码生成器由CSS和JavaScript制成

手把教你使用HTML、CSS和JS制作随机密码生成器(分享)

写在前面的

随机密码生成器 它很简单JavaScript应用程序可以自动生成密码。这种类型的应用程序使用各种数字、符号、字母等来创建更复杂、更安全的密码。

在本文中,我将向您展示如何使用HTMLCSSJavaScript代码可以轻松构建随机密码生成器系统。我没有在这里使用任何东西。JQuery插件或JavaScript库。

但这是我第一次制作这样的随机密码生成器。我用它。JavaScriptMath.floorMath.random创建它的方法。我在这个密码中添加了数字、不同的符号和字母。在这里我们使用不同类型的循环,每次都创建不同的密码。

如上图所示,我首先将网页的背景涂成蓝色。然后我在那个页面上做了一个小盒子。首先,我在那个框中添加了一个文本。以下是一个可以生成密码的小显示或输入。我还在底部做了两个按钮。其中一个将生成密码,另一个将复制密码。

下面是一个现场演示,可以帮助您了解它(JavaScript 密码生成器的工作原理:http://haiyong.site/random-password-generator

您可以在项目中复制和使用这些源代码。如果你是初学者,那么你必须了解我是如何根据下面的教程制作的。

如何构建随机密码生成器

首先,你创建一个HTML文件(index.html)还有一个CSS文件(index.css)。在这里我没有单独创建任何东西JavaScript文件(index.js)。但是,您可以根据需要创建单独的JavaScript文件。

第 1 步骤:在网页中创建一个框架

这个盒子是在每个人的第一个网页上创建的。将使用以下内容。HTMLCSS代码创建。我在这里用了它。#0581ca背景色。如有必要,您可以使用任何其他背景颜色。我用白色作为盒子的背景色。在这种情况下,我们没有指定盒子的具体高度或大小,这将取决于内容的数量。

HTML