随机密码生成器 - HTML | CSS | JS

HTML：

 <div class="container">  
 <h2 class="title">密码生成器</h2>  
 <div class="result">  
 <div class="result__title field-title">生成的密码</div>  
 <div class="result__info right">点击复制</div>  
 <div class="result__info left">复制了</div>  
 <div class="result__viewbox" id="result">点击生成</div>  
 <button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>  
 </div>  
 <div class="length range__slider" data-min="4" data-max="32">  
 <div class="length__title field-title" data-length='0'>长度：</div>  
 <input id="slider" type="range" min="4" max="32" value="16" />  
 </div> <div class="settings">  
 <span class="settings__title field-title">设置</span>  
 <div class="setting">  
 <input type="checkbox" id="uppercase" checked />  
 <label for="uppercase">包括大写</label>  
 </div>  
 <div class="setting">  
 <input type="checkbox" id="lowercase" checked />  
 <label for="lowercase">包括小写</label>  
 </div>  
 <div class="setting">  
 <input type="checkbox" id="number" checked />  
 <label for="number">包括数字</label>  
 </div>  
 <div class="setting">  
 <input type="checkbox" id="symbol" />  
 <label for="symbol">包括符号</label>  
 </div>  
 </div> <button class="btn generate" id="generate">生成密码</button>  
 </div>  
 <div class="support">  
 <a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>  
 <a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>  
 </div> <a class="github-corner" href="https://github.com/devloop01/password-generator" title="Fork me on GitHub" target="_blank">  
 <svg width="80" height="80" viewbox="0 0 250 250">  
 <title>在 GitHub 上叉我</title>  
 <path d="M0 0h250v250" />  
 <path class="octo-arm" d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px;" />  
 <path class="octo-body" d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor" />  
 </svg>  
 </a>

CSS：

 * {  
 边距：0；  
 填充：0；  
 box-sizing：边框框；  
 }  
 身体 {  
 宽度：100%；  
 高度：100vh；  
 背景图像：线性渐变（到顶部，#209cff 100%，#68e0cf 200%）；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 }  
 按钮 {  
 边框：0；  
 大纲：0；  
 } 。容器 {  
 边距：40px 0；  
 宽度：400px；  
 高度：600px；  
 填充：10px 25px；  
 背景：#0a0e31；  
 边框半径：10px；  
 盒子阴影：0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);  
 字体系列：“蒙特塞拉特”；  
 h2.title {  
 字体大小：1.75rem；  
 边距：10px -5px；  
 边距底部：30px；  
 颜色：#fff;  
 }  
 } $field-color: rgba(255, 255, 255, 0.08);  
 $字段高度：65px；  
 $field-border-radius: 8px; 。结果 {  
 位置：相对；  
 宽度：100%；  
 高度：65px；  
 溢出：隐藏；  
 &__信息{  
 ＆。正确的 {  
 右：8px；  
 }  
 ＆。剩下 {  
 左：8px；  
 }  
 位置：绝对；  
 底部：4px；  
 颜色：#fff;  
 字体大小：0.8rem；  
 过渡：所有 150ms 缓入出；  
 变换：translateY（200%）；  
 不透明度：0；  
 }  
 &__viewbox {  
 宽度：100%；  
 高度：100%；  
 背景：$字段颜色；  
 边界半径：$字段边界半径；  
 颜色：#fff;  
 文本对齐：居中；  
 行高：65px；  
 }  
 #copy-btn {  
 位置：绝对；  
 顶部：var（--y）；  
 左：var（--x）；  
 宽度：38px；  
 高度：38px；  
 背景：#fff;  
 边界半径：50%；  
 不透明度：0；  
 变换：平移（-50%，-50%）比例（0）；  
 过渡：所有 350ms 三次贝塞尔曲线（0.175、0.885、0.32、1.275）；  
 光标：指针；  
 z指数：2；  
 ＆：积极的 {  
 盒子阴影：0 0 0 200px rgba(255, 255, 255, 0.08);  
 }  
 }  
 &:悬停{  
 #copy-btn {  
 不透明度：1；  
 变换：平移（-50%，-50%）比例（1.35）；  
 }  
 }  
 }  
 .field-title {  
 位置：绝对；  
 顶部：-10px；  
 左：8px；  
 变换：translateY（-50%）；  
 字体粗细：800；  
 颜色：rgba(255, 255, 255, 0.5);  
 文本转换：大写；  
 字体大小：0.65rem；  
 指针事件：无；  
 用户选择：无；  
 } 。选项 {  
 宽度：100%；  
 高度：自动；  
 边距：50px 0；  
 }  
 .range__slider {  
 位置：相对；  
 宽度：100%；  
 高度：计算（#{$field-height} - 10px）；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 背景：$字段颜色；  
 边界半径：$字段边界半径；  
 边距：30px 0； ＆：：前，  
 ＆：：后 {  
 位置：绝对；  
 颜色：#fff;  
 字体大小：0.9rem；  
 字体粗细：粗体；  
 }  
 ＆：：前 {  
 内容：attr(data-min);  
 左：10px；  
 }  
 ＆：：后 {  
 内容：attr（数据最大）；  
 右：10px；  
 }  
 .length__title::{之后  
 内容：attr（数据长度）；  
 位置：绝对；  
 右：-16px；  
 字体变体数字：表格数字；  
 颜色：#fff;  
 }  
 } $range-handle-color: rgb(255, 255, 255) !default;  
 $range-handle-color-hover: rgb(212, 212, 212) !default;  
 $range-handle-size: 20px !default; $range-track-color: rgba(255, 255, 255, 0.314) !default;  
 $range-track-height: 2px !default; $range-label-width: 60px !default; #滑块{  
 -webkit 外观：无；  
 宽度: calc(100% - (#{$range-label-width + 10px}));  
 高度：$范围轨道高度；  
 边框半径：5px；  
 背景：$范围轨道颜色；  
 大纲：无；  
 填充：0；  
 边距：0；  
 光标：指针； // 范围句柄  
 &::-webkit-slider-thumb {  
 -webkit 外观：无；  
 宽度：$范围手柄尺寸；  
 高度：$范围手柄尺寸；  
 边界半径：50%；  
 背景：$范围手柄颜色；  
 光标：指针；  
 过渡：所有 0.15 秒缓入出；  
 &:悬停{  
 背景：$range-handle-color-hover；  
 变换：比例（1.2）；  
 }  
 }  
 &::-moz-range-thumb {  
 宽度：$范围手柄尺寸；  
 高度：$范围手柄尺寸；  
 边框：0；  
 边界半径：50%；  
 背景：$范围手柄颜色；  
 光标：指针；  
 过渡：背景 0.15s 缓进出；  
 &:悬停{  
 背景：$range-handle-color-hover；  
 }  
 }  
 } . 设置 {  
 位置：相对；  
 高度：自动；  
 寡妇：100%；  
 显示：弯曲；  
 弹性方向：列； 。环境 {  
 位置：相对；  
 宽度：100%；  
 高度：计算（#{$field-height} - 10px）；  
 背景：$字段颜色；  
 边界半径：$字段边界半径；  
 显示：弯曲；  
 对齐项目：居中；  
 填充：10px 25px；  
 颜色：#fff;  
 边距底部：8px；  
 输入 {  
 不透明度：0；  
 位置：绝对；  
 + 标签 {  
 用户选择：无；  
 ＆：：前，  
 ＆：：后 {  
 内容： ””;  
 位置：绝对；  
 过渡：150ms 三次贝塞尔曲线（0.24, 0, 0.5, 1）；  
 变换：translateY（-50%）；  
 最高：50%；  
 右：10px；  
 光标：指针；  
 }  
 ＆：：前 {  
 高度：30px；  
 宽度：50px；  
 边框半径：30px；  
 背景：RGBA（214、214、214、0.434）；  
 }  
 ＆：：后 {  
 高度：24px；  
 宽度：24px；  
 边框半径：60px；  
 右：32px；  
 背景：#fff;  
 }  
 }  
 &:检查{  
 & + 标签：之前 {  
 背景：#5d68e2；  
 过渡：所有 150ms 三次贝塞尔曲线（0, 0, 0, 0.1）；  
 }  
 & + 标签：在 { 之后  
 右：14px；  
 }  
 }  
 ＆：重点 {  
 + 标签：之前 {  
 盒子阴影：0 0 0 2px rgba(255, 255, 255, 0.75);  
 }  
 }  
 &:禁用{  
 + 标签{  
 &:before, &:after{ 光标：不允许 }  
 &:before{ 背景：#4f4f6a }  
 &:after{ 背景：#909090 }  
 }  
 }  
 }  
 }  
 } .btn.generate {  
 用户选择：无；  
 位置：相对；  
 宽度：100%；  
 高度：50px；  
 边距：10px 0；  
 边界半径：$字段边界半径；  
 颜色：#fff;  
 边框：无；  
 背景图像：线性渐变（135deg，#667eea 0%，#764ba2 100%）；  
 字母间距：1px；  
 字体粗细：粗体；  
 文本转换：大写；  
 光标：指针；  
 过渡：全部 150ms 缓动；  
 ＆：积极的 {  
 变换：translateY（-3%）；  
 盒子阴影：0 4px 8px rgba(255, 255, 255, 0.08);  
 }  
 } 。支持{  
 位置：固定；  
 右：10px；  
 底部：10px；  
 填充：10px；  
 显示：弯曲；  
 }  
 一个{  
 边距：0 20px；  
 颜色：#fff;  
 字体大小：2rem；  
 过渡：全部 400ms 缓动；  
 } 一：悬停{  
 颜色：#222；  
 } .github-corner svg{  
 位置：绝对；  
 对：0；  
 顶部：0；  
 混合混合模式：变暗；  
 颜色：#eeeeee;  
 填充：#353535;  
 剪辑路径：多边形（0 0, 100% 0, 100% 100%）；  
 }  
 .github-corner:悬停 .octo-arm{  
 动画：octocat-wave .56s；  
 }  
 @keyframes 八角波{  
 0%, 100%{  
 变换：旋转（0）；  
 }  
 20%、60%{  
 变换：旋转（-20 度）；  
 }  
 40%、80%{  
 变换：旋转（10度）；  
 }  
 }

JavaScript：

 // 这是一个简单的密码生成器应用程序，它会生成随机密码，也许你可以让他们保护你的帐户。  
 // 我尽力使代码尽可能简单，请不要介意变量名。  
 // 在查看 Traversy Media 的最新视频后，我也想到了这个想法。 // 每次刷新时清除concole  
 控制台.clear();  
 //设置body为全高  
 // document.body.style.height = `${innerHeight}px` // 范围滑块属性。  
 // Fill : 拖动滑块时看到的尾随颜色。  
 // 背景：默认范围滑块背景  
 常量滑块属性 = {  
 填充：“#0B1EDF”，  
 背景：“rgba(255, 255, 255, 0.214)”,  
 }; // 选择将影响密码的 LENGTH 属性的 Range Slider 容器。  
 常量滑块 = document.querySelector(".range__slider"); // 将显示范围滑块值的文本。  
 const sliderValue = document.querySelector(".length__title"); // 使用事件侦听器应用填充并更改文本的值。  
 slider.querySelector("input").addEventListener("input", event => {  
 sliderValue.setAttribute("数据长度", event.target.value);  
 应用填充（事件。目标）；  
 });  
 // 选择范围输入并将其传递给 applyFill 函数。  
 applyFill(slider.querySelector("input"));  
 // 这个函数负责创建尾随颜色和设置填充。  
 功能应用填充（滑块）{  
 常量百分比 = (100 * (slider.value - slider.min)) / (slider.max - slider.min);  
 const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +  
 0.1}%)`;  
 滑块.style.background = bg;  
 sliderValue.setAttribute("数据长度", slider.value);  
 } // 我们将用于创建随机密码字母的所有函数名称的对象  
 常量随机函数 = {  
 更低：getRandomLower，  
 上：getRandomUpper，  
 数字：getRandomNumber，  
 符号：getRandomSymbol，  
 }; // 随机更安全的值  
 功能安全数学随机（）{  
 返回 window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1);  
 } // 生成器函数  
 // 所有负责返回随机值的函数，我们将使用它来创建密码。  
 函数 getRandomLower() {  
 return String.fromCharCode(Math.floor(Math.random() * 26) + 97);  
 }  
 函数 getRandomUpper() {  
 return String.fromCharCode(Math.floor(Math.random() * 26) + 65);  
 }  
 函数 getRandomNumber() {  
 return String.fromCharCode(Math.floor(secureMathRandom() * 10) + 48);  
 }  
 函数 getRandomSymbol() {  
 常量符号 = '[[email protected]](/cdn-cgi/l/email-protection)#$%^&*()_+{}":?><;.,';  
 返回符号[Math.floor(Math.random() * symbols.length)];  
 } // 选择所有需要的 DOM 元素 --> // 将显示结果的 Viewbox  
 const resultEl = document.getElementById("result");  
 // 输入滑块，用于更改密码长度  
 const lengthEl = document.getElementById("slider"); // 表示负责根据用户创建不同类型密码的选项的复选框  
 const uppercaseEl = document.getElementById("大写");  
 const lowercaseEl = document.getElementById("lowercase");  
 const numberEl = document.getElementById("number");  
 const symbolEl = document.getElementById("symbol"); // 生成密码的按钮  
 const generateBtn = document.getElementById("generate");  
 // 复制文本的按钮  
 const copyBtn = document.getElementById("copy-btn");  
 // 结果视图框容器  
 const resultContainer = document.querySelector(".result");  
 // 点击生成按钮后显示的文本信息  
 const copyInfo = document.querySelector(".result__info.right");  
 // 点击复制按钮后出现文本  
 const 复制信息 = document.querySelector(".result__info.left"); // 如果这个变量是trye only，那么copyBtn 将会出现，即当用户第一次点击生成时，copyBth 将进行交互。  
 让生成密码=假； // 更新 COPY 按钮的 Css Props  
 // 获取结果视图框容器的边界  
 让 resultContainerBound = {  
 左：resultContainer.getBoundingClientRect().left，  
 顶部：resultContainer.getBoundingClientRect().top，  
 };  
 // 这将根据鼠标位置更新复制按钮的位置  
 resultContainer.addEventListener("mousemove", e => {  
 结果容器绑定 = {  
 左：resultContainer.getBoundingClientRect().left，  
 顶部：resultContainer.getBoundingClientRect().top，  
 };  
 如果（生成密码）{  
 copyBtn.style.opacity = '1';  
 copyBtn.style.pointerEvents = '全部';  
 copyBtn.style.setProperty("--x", `${ex - resultContainerBound.left}px`);  
 copyBtn.style.setProperty("--y", `${ey - resultContainerBound.top}px`);  
 }别的{  
 copyBtn.style.opacity = '0';  
 copyBtn.style.pointerEvents = '无';  
 }  
 });  
 window.addEventListener("resize", e => {  
 结果容器绑定 = {  
 左：resultContainer.getBoundingClientRect().left，  
 顶部：resultContainer.getBoundingClientRect().top，  
 };  
 }); // 在剪贴板中复制密码  
 copyBtn.addEventListener("点击", () => {  
 const textarea = document.createElement("textarea");  
 常量密码 = resultEl.innerText;  
 如果（！密码||密码==“点击生成”）{  
 返回;  
 }  
 textarea.value = 密码；  
 document.body.appendChild(textarea);  
 textarea.select();  
 document.execCommand("复制");  
 textarea.remove(); copyInfo.style.transform = "translateY(200%)";  
 copyInfo.style.opacity = "0";  
 复制信息.style.transform = "translateY(0%)";  
 复制信息.style.opacity = "0.75";  
 }); // 当点击 Generate 时密码 id 生成。  
 generateBtn.addEventListener("点击", () => {  
 常量长度 = +lengthEl.value;  
 const hasLower = lowercaseEl.checked;  
 const hasUpper = uppercaseEl.checked;  
 const hasNumber = numberEl.checked;  
 const hasSymbol = symbolEl.checked;  
 生成密码=真；  
 resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);  
 copyInfo.style.transform = "translateY(0%)";  
 copyInfo.style.opacity = "0.75";  
 复制信息.style.transform = "translateY(200%)";  
 复制信息.style.opacity = "0";  
 }); // 负责生成密码并返回密码的函数。  
 函数 generatePassword(length, lower, upper, number, symbol) {  
 让生成密码 = "";  
 const typesCount = 下 + 上 + 数字 + 符号；  
 const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);  
 if (typesCount === 0) {  
 返回 ””;  
 }  
 for (让 i = 0; i < 长度; i++) {  
 typesArr.forEach（类型 => {  
 const funcName = Object.keys(type)[0];  
 generatedPassword += randomFunc[funcName]();  
 });  
 }  
 return generatedPassword.slice(0, length)  
 .split('').sort(() => Math.random() - 0.5)  
 。加入（''）;  
 } // 处理复选框状态的函数，因此至少需要选中一个。最后一个复选框将被禁用。  
 功能 disableOnlyCheckbox(){  
 让 totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked)  
 totalChecked.forEach(el => {  
 if(totalChecked.length == 1){  
 el.disabled = 真；  
 }别的{  
 el.disabled = 假；  
 }  
 })  
 } [大写El，小写El，numberEl，symbolEl].forEach（el => {  
 el.addEventListener('click', () => {  
 disableOnlyCheckbox()  
 })  
 })