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.原数组循环遍历完成后,组建一个已经去除重复的新数组.事件