js 密碼生成器

時間  2021-02-17
標籤 css git github app dom ide 函數 post 學習 編碼 欄目 JavaScript 简体版
原文   原文鏈接

密碼生成器

最近參考網上的一些密碼生成器，模仿着作了一個相似的密碼生成器，密碼主要由"大寫"，"小寫"，"數字"，"符號"組成，具體樣式如圖：css

密碼生成器.png

開發過程

該文主要記錄js開發流程，css樣式會在文章結尾的給github文件中給出，主要用來記錄學習js開發流程git

滑動效果

1.設置樣式屬性
2.監聽input[ranger]滑動，而且改變尾隨顏色
3.設置輸入密碼生成器的數字
（js: setAttribute() 方法添加指定的屬性，併爲其賦指定的值）github

//範圍滑塊屬性。
//填充：拖動滑塊時看到的尾隨顏色。
// 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 數字編碼指定。使用語法：app

//將用於建立隨機密碼字母的全部函數名稱的對象
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複製方法：dom

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

生成密碼

利用遍歷循環生成對應的字符串，利用截取對應的長度進行生成密碼ide

// 該函數負責生成密碼，而後將其返回
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.合成對應數量的密碼post

源碼：

//這是一個簡單的密碼生成器應用，能夠生成隨機密碼，也許您可​​以用它們來保護您的賬戶。
//我盡力使代碼儘量簡單，請不要介意變量名。


//每次刷新時清除控制檯
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學習

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程