案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個隨機密碼生成器，用戶點擊生成，輸入框內就會生成一個由數字、大小寫字母、特殊符號隨機組合而成的密碼，通過實戰我們將學會Math.floor方法、substring方法、clipboard.writeText方法，
案例演示
點擊生成后，輸入框內會隨機生成一串密碼，點擊復制，會彈出復制成功的訊息框，
案例設計
JavaScript實戰案例-隨機生成密碼
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構，
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼，
原始碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼，
<div >
<h2>隨機生成密碼</h2>
<div >
<input type="text" id="input" placeholder="生成密碼" readonly/>
<i ></i>
</div>
<button >生成</button>
</div>
<div >復制密碼</div>
然后我們來撰寫核心的JavaScript代碼，通過querySelector獲取HTML元素的資訊；添加生成按鈕的點擊事件，點擊生成按鈕時創建密碼；添加復制按鈕的點擊事件，點擊復制按鈕時復制密碼，若輸入框內不空則彈出復制成功的提示框；生成密碼，密碼內容從字串中提取，密碼長度12，回圈生成密碼，使用Math的floor和random方法獲得亂數字，使用subString截取字符組成密碼，將已生成的密碼值設定為輸入框和彈出框的內容；復制代碼使用select和setSelectionRange讓用戶可以使用滑鼠復制，或使用Clipboard介面的 writeText() 方法將密碼寫入作業系統的剪切板中，
<script>
//有個小院-興趣編程
const btnEl=document.querySelector(".btn");
const inputEl=document.getElementById("input");
const copyIconEl=document.querySelector(".fa-copy");
const alertContainerEl=document.querySelector(".alert-container");
btnEl.addEventListener("click",()=>{
createPassword();
});
copyIconEl.addEventListener("click",()=>{
copyPassword();
if(inputEl.value){
alertContainerEl.classList.remove("active");
setTimeout(()=>{
alertContainerEl.classList.add("active");
},2000);
}
});
function createPassword() {
const chars="0123456789abcdefghijklmnopqrstuvwxtz!@#$%^&*()_+?:{}[]ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const passwordLength=12;
let password="";
for(let index=0;index<passwordLength;index++){
const randomNum=Math.floor(Math.random()*chars.length);
password+=chars.substring(randomNum,randomNum+1);
}
inputEl.value=https://www.cnblogs.com/xFeater/p/password;
alertContainerEl.innerText=password+"已復制";
}
function copyPassword() {
inputEl.select();
inputEl.setSelectionRange(0,9999);
navigator.clipboard.writeText(inputEl.value);
} </script>
總結思考
學習點
1、math.floor(x)回傳小于引數x的最大整數，
2、substring(start,stop)：start是檢索的開始位置,stop是檢索的終止位置,回傳結果中不包括stop所指字符，
3、Clipboard介面的 writeText() 方法可以寫入特定字串到作業系統的剪切板，
問答
1、math.floor(x)回傳的整數嗎？
2、substring回傳結果中包不包括stop所指的字符？
3、writeText() 方法可以將特定字符寫入作業系統的剪切板嗎？
關注我，跟著我每天學習一點點，讓你不再枯燥，不再孤單..
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例，編程/就業/副業/創業/資源，
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538992.html
標籤：JavaScript