用JS簡單生成4位數驗證碼

時間 2019-11-08

原文原文鏈接

本文爲你們分享了數字字母驗證碼的具體實現代碼，供你們參考，具體內容以下bash

解體思路建立一個文件，要求獲取由隨機數字字母組成的四位驗證碼，並保證四位數字字母不重複，並且讓四位隨機驗證碼顯示在頁面上。dom

首先咱們封裝一個函數，讓這個函數隨機獲取四個由數字字母組成的驗證碼。

function fn2() {
        var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789'; (這裏的字符能夠隨便寫)
        var str2 = '';
        (利用for循環來隨機得到字符)
        for (var i = 0; i < 4; i++) {
            var n = Math.round(Math.random() * 61) (61表明的是字符串的長度)
            
接下來咱們作字符串的拼接，在拼接以前，先判斷是否由字符串有相同的字符，若是有，則不拼接。
if (str2.indexOf(str[n]) === -1) {
                str2 = str2 + str[n];
若是獲得的字符在str2中存在，則須要讓循環再執行一次。
else{
    i--
}
return str2
輸出str2的返回值
複製代碼

下一步咱們要把生成的驗證碼顯示再頁面上。函數

先在body裏添加一個i元素，設置一個類名，而後獲取這個元素，並實現每點擊一次盒子實現驗證碼的變換ui

<body>
 <i id="box"></i>
 </body>
 <script>
 ······(此部分代碼手懶不寫)
 var box =document.getElementById('box')
    box.innerHTML = fn4()
    box.onclick = function () {
        box.innerHTML = fn4()
    }
 </script>
複製代碼