效果要求

验证码的效果是：点击按钮，随机生成由四个字符组成的字符串，且字符串不重复，每次点击都会依次更新。

第一步

首先我们应该在body里面创造一个按钮：

<body>
   <button id="btn">验证码</button>
</body>

第二步

我们要拿到这个大字符串，并拿到其中的四个随机整数

var str="qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789"// 大字符串

找到字符串后，由于我们是要获取其中四个字符，所以这就决定了我们要循环的轮数。要想获取字符串

里面的随机数这用到了Math的知识点：Math.random()函数返回0和1之间的随机数，在这里我们要获取的是0-61之间的随机整数，所以代码是：

Math.round(Math.random()*61)

这样我们就得到了这个字符串，但是由于取整的方法是随机的，所以在这里我们需要对得到的字符串去重，在这里我们用indexOf去重的方法。完整代码如下：

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
    }

第三步

添加点击事件

添加点击事件时，首先我们要获取到这个点击的元素，然后去绑定添加事件。

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

注意事项

用indexOf要注意： 1.创建一个新的空数组,用来存放去重后的新数组. 2.利用for循环循环遍历需要去重的数组. 3.利用indexOf()方法查询遍历出的数组在新数组中是否出现,如果出现:则继续遍历数组,如未出现:则利用push方法添加到新数组中. 4.原数组循环遍历完成后,组建一个已经去除重复的新数组.

JS 验证码效果的实现

效果要求

第一步

第二步

第三步

添加点击事件

注意事项