案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個隨機密碼生成器。用戶點擊生成，輸入框內就會生成一個由數字、大小寫字母、特殊符號隨機組合而成的密碼。通過實戰我們將學會Math.floor方法、substring方法、clipboard ...
案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個隨機密碼生成器。用戶點擊生成，輸入框內就會生成一個由數字、大小寫字母、特殊符號隨機組合而成的密碼。通過實戰我們將學會Math.floor方法、substring方法、clipboard.writeText方法。
案例演示
點擊生成後，輸入框內會隨機生成一串密碼，點擊複製，會彈出複製成功的消息框。
案例設計
JavaScript實戰案例-隨機生成密碼
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。
源碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼。
<div class="password-container">
<h2>隨機生成密碼</h2>
<div class="input-container">
<input type="text" id="input" class="input" placeholder="生成密碼" readonly/>
<i class="far fa-copy fa-2x"></i>
</div>
<button class="btn">生成</button>
</div>
<div class="alert-container active">複製密碼</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=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 (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
