js 密码生成器

2019-11-01 admin

最近参考网上的一些密码生成器,模仿着做了一个类似的密码生成器,密码主要由"大写",“小写”,“数字”,"符号"组成,具体样式如图:

密码生成器.png

该文主要记录js开发流程,css样式会在文章结尾的给github文件中给出,主要用来记录学习js开发流程

滑动效果

1.设置样式属性 2.监听input[ranger]滑动,并且改变尾随颜色 3.设置输入密码生成器的数字 (js: setAttribute() 方法添加指定的属性,并为其赋指定的值)

//范围滑块属性。
//填充:拖动滑块时看到的尾随颜色。
// background:默认范围滑块背景

const  sliderProps = {
    fill:'#0B1EDF',
    background: 'rgba(255, 255, 255, 0.214)'
};

//选择范围滑块容器,
const slider = document.querySelector(".range__slider");
//显示范围滑块值的文本。
const sliderValue = document.querySelector(".length__title");
//使用事件监听器应用填充并更改文本的值。
slider.querySelector("input").addEventListener("input", event => {
    //setAttribute() 方法添加指定的属性,并为其赋指定的值
    sliderValue.setAttribute("data-length", event.target.value);
    applyFill(event.target);
});
//选择范围输入并将其传递给applyFill函数
applyFill(slider.querySelector("input"));

//此函数负责创建尾随颜色并设置填充。
function applyFill(slider) {
    const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
    const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
    0.1}%)`;
    slider.style.background = bg;
    sliderValue.setAttribute("data-length", slider.value);
}

生成随机的密码字母的函数名称对象

fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。 注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法:

//将用于创建随机密码字母的所有函数名称的对象
const  randomFunc = {
    lower: getRondomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
};

// 生成函数
// 所有的函数负责返回一个随机值,我们将使用它来创建密码。

function getRondomLower() {
    //fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
    // 注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()。
    return String.fromCharCode(Math.floor(Math.random() * 26 ) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);

}
function getRandomSymbol() {
    const symbols = '~!@#$%^&*()_+{}":?><;.,';
    return symbols[Math.floor(Math.random() * symbols.length)];
}

选择必需DOM元素

//选择所有必需的DOM元素
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("slider");

//代表根据用户创建不同类型密码的选项的复选框
const uppercaseEl = document.getElementById("uppercase");
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 copiedInfo = document.querySelector(".result__info.left");

监听页面鼠标移动并且设置复制按钮位置,并且复制密码

js复制方法:

textarea.select();
document.execCommand("copy");

复制按钮.png

//更新COPY按钮的CSS属性
//获取结果视图框容器的边界
let resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top,
};
//这将根据鼠标位置更新复制按钮的位置
resultContainer.addEventListener("mousemove", e => {
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
});

//复制剪贴板中的密码
copyBtn.addEventListener("click", () => {
    const textarea = document.createElement("textarea");
    const password = resultEl.innerText;
    if (!password || password == "CLICK GENERATE") {
        return;
    }
    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();

    copyInfo.style.transform = "translateY(200%)";
    copyInfo.style.opacity = "0";
    copiedInfo.style.transform = "translateY(0%)";
    copiedInfo.style.opacity = "0.75";
});

生成密码

利用遍历循环生成对应的字符串,利用截取对应的长度进行生成密码

// 该函数负责生成密码,然后将其返回
function generatePassword(length, lower, upper, number, symbol) {
    let generatedPassword = "";
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
    if (typesCount === 0) {
        return "";
    }
    for (let i = 0; i < length; i++) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }
    return generatedPassword.slice(0, length);
}

其中关于Object对象的常用操作,在网上看一篇对Object的常用操作总结,希望可以作为参考:https://www.haorooms.com/post/js_objectoperate

该密码生成器主要js重点: 1.随机生成对应的大写,小写,数字,符号 2.合成对应数量的密码

源码:

//这是一个简单的密码生成器应用,可以生成随机密码,也许您可​​以用它们来保护您的帐户。
//我尽力使代码尽可能简单,请不要介意变量名。

//每次刷新时清除控制台
console.clear();

//范围滑块属性。
//填充:拖动滑块时看到的尾随颜色。
// background:默认范围滑块背景

const  sliderProps = {
    fill:'#0B1EDF',
    background: 'rgba(255, 255, 255, 0.214)'
};

//选择范围滑块容器,
const slider = document.querySelector(".range__slider");
//显示范围滑块值的文本。
const sliderValue = document.querySelector(".length__title");
//使用事件监听器应用填充并更改文本的值。
slider.querySelector("input").addEventListener("input", event => {
    //setAttribute() 方法添加指定的属性,并为其赋指定的值
    sliderValue.setAttribute("data-length", event.target.value);
    applyFill(event.target);
});
//选择范围输入并将其传递给applyFill函数
applyFill(slider.querySelector("input"));

//此函数负责创建尾随颜色并设置填充。
function applyFill(slider) {
    const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
    const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
    0.1}%)`;
    slider.style.background = bg;
    sliderValue.setAttribute("data-length", slider.value);
}

//将用于创建随机密码字母的所有函数名称的对象
const  randomFunc = {
    lower: getRondomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
};

// 生成函数
// 所有的函数负责返回一个随机值,我们将使用它来创建密码。

function getRondomLower() {
    //fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
    // 注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()。
    return String.fromCharCode(Math.floor(Math.random() * 26 ) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);

}
function getRandomSymbol() {
    const symbols = '~!@#$%^&*()_+{}":?><;.,';
    return symbols[Math.floor(Math.random() * symbols.length)];
}

//选择所有必需的DOM元素
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("slider");

//代表根据用户创建不同类型密码的选项的复选框
const uppercaseEl = document.getElementById("uppercase");
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 copiedInfo = document.querySelector(".result__info.left");

//更新COPY按钮的CSS属性
//获取结果视图框容器的边界
let resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top,
};
//这将根据鼠标位置更新复制按钮的位置
resultContainer.addEventListener("mousemove", e => {
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
});

//复制剪贴板中的密码
copyBtn.addEventListener("click", () => {
    const textarea = document.createElement("textarea");
    const password = resultEl.innerText;
    if (!password || password == "CLICK GENERATE") {
        return;
    }
    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();

    copyInfo.style.transform = "translateY(200%)";
    copyInfo.style.opacity = "0";
    copiedInfo.style.transform = "translateY(0%)";
    copiedInfo.style.opacity = "0.75";
});

//单击生成时,将生成密码ID
generateBtn.addEventListener("click", () => {
    const length = +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";
    copiedInfo.style.transform = "translateY(200%)";
    copiedInfo.style.opacity = "0";
});

generateBtn.addEventListener("click", () => {
    const length = +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";
    copiedInfo.style.transform = "translateY(200%)";
    copiedInfo.style.opacity = "0";
});

// 该函数负责生成密码,然后将其返回。
function generatePassword(length, lower, upper, number, symbol) {
    let generatedPassword = "";
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
    if (typesCount === 0) {
        return "";
    }
    for (let i = 0; i < length; i++) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }
    return generatedPassword.slice(0, length);
}

并且大家希望看到其他css,js代码,可以查看我的github地址:https://github.com/panpanxiong3/Front-end-effect-link

[转载]原文链接:https://segmentfault.com/a/1190000020876869

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78752.html

文章标题:js 密码生成器

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
回到顶部