JS 驗證碼效果的實現

時間 2019-11-09

原文原文鏈接

效果要求

驗證碼的效果是：點擊按鈕，隨機生成由四個字符組成的字符串，且字符串不重複，每次點擊都會依次更新。數組

第一步

首先咱們應該在body裏面創造一個按鈕：bash

<body>
   <button id="btn">驗證碼</button>
</body>
複製代碼

第二步

咱們要拿到這個大字符串，並拿到其中的四個隨機整數dom

var str="qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789"// 大字符串
複製代碼

找到字符串後，因爲咱們是要獲取其中四個字符，因此這就決定了咱們要循環的輪數。要想獲取字符串函數

裏面的隨機數這用到了Math的知識點：Math.random()函數返回0和1之間的隨機數，在這裏咱們要獲取的是0-61之間的隨機整數，因此代碼是：ui

Math.round(Math.random()*61)
複製代碼

這樣咱們就獲得了這個字符串，可是因爲取整的方法是隨機的，因此在這裏咱們須要對獲得的字符串去重，在這裏咱們用indexOf去重的方法。完整代碼以下：spa

function fn(){
        var str="qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789"
        var str = '';
        while(str.length<4){
            var n =Math.round(Math.random()*61) 
            if(str.indexOf(str[n])===-1){
                str=str+str[n]   
            }
        }
        return str
    }
複製代碼

第三步

添加點擊事件

添加點擊事件時，首先咱們要獲取到這個點擊的元素，而後去綁定添加事件。code

var box =document.getElementById('box')
    box.innerHTML = fn();
    box.onclick = function(){
        box.innerHTML=fn();
    }
複製代碼

注意事項

用indexOf要注意： 1.建立一個新的空數組,用來存放去重後的新數組. 2.利用for循環循環遍歷須要去重的數組. 3.利用indexOf()方法查詢遍歷出的數組在新數組中是否出現,若是出現:則繼續遍歷數組,如未出現:則利用push方法添加到新數組中. 4.原數組循環遍歷完成後,組建一個已經去除重複的新數組.事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。