0058.實戰案例：獲取四位不重復的驗證碼 · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培訓 - 微信：18310612838</title>  <style> * { margin: 0; padding: 0; user-select: none; } .codeBox { box-sizing: border-box; margin: 20px; width: 100px; height: 40px; line-height: 40px; text-align: center; border: 1px solid lightcoral; cursor: pointer; font-size: 20px; letter-spacing: 5px; } </style> </head> <body>   <script> /* * 思路：一加載頁面，就生成四位驗證碼，放置到CODEBOX盒子中；當我們點擊CODEBOX盒子的時候，需要重新生成四位驗證碼，放置到盒子中！ * 四位驗證碼規則：隨機獲取數字+字母（大小寫）四位即可 */ // let codeBox = document.getElementById('codeBox'); /* 創建驗證碼，并把其放在CODEBOX盒子中 */ /* function createCode() { let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm', codeText = ''; for (let i = 1; i <= 4; i++) { let ran = Math.round(Math.random() * (61 - 0) + 0), char = area.charAt(ran); codeText += char; } codeBox.innerHTML = codeText; } */ // 加載頁面就執行一次 // createCode(); // 點擊CODEBOX盒子重新生成（此處函數后面不能加小括號，因為我們不是立即把函數執行，而是想讓點擊的時候才執行） // codeBox.onclick = createCode; /* // 驗證碼的取值范圍（索引范圍：0~61） let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'; // 隨機獲取四個（Math.random()）：隨機獲取四個0~61之間的索引值，基于這個值到AREA范圍中取四個字符，拼成我們需要的四位驗證碼即可 let codeText = ''; for (let i = 1; i <= 4; i++) { // 每一次循環獲取一個隨機的索引 let ran = Math.round(Math.random() * (61 - 0) + 0); // 基于索引獲取對應的字符 let char = area.charAt(ran); // 拼接到結果中 codeText += char; } console.log(codeText); */ </script> <script> (function () { let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'; let codeText = ''; // 當前需求下，到底循環多少次就已經不再是準確的了 /* for (let i = 1; i <= 4;) { let ran = Math.round(Math.random() * (61 - 0) + 0); let char = area.charAt(ran); // 拼接之前，首先判斷獲取的字符CHAR在原始字符串中是否已經存在，不存在我們在拼接進來看，只要存在就不去拼接（大小寫字母一樣也算重復 =>不論你現在是大寫還是小寫，反正我們都是轉換為大寫，然后判斷存不存在的） if (!codeText.toUpperCase().includes(char.toUpperCase())) { codeText += char; i++; } } */ // 對于不確定具體循環次數的循環，我們一般用while循環 // while(條件){ } 只要條件成立就會一直循環 while (codeText.length < 4) { let ran = Math.round(Math.random() * (61 - 0) + 0), char = area.charAt(ran); if (!codeText.toUpperCase().includes(char.toUpperCase())) { codeText += char; } } console.log(codeText); })(); </script> </body> </html> ~~~