模拟验证码

css：

<style>

        * { margin: 0; padding: 0;}

           .warp { width: 400px;height: 200px;margin: auto;}

            .auth-code {width: 150px;height: 30px;border: 3px solid red;text-align: center;line-height: 30px;}

            .txt {width: 150px;height: 30px;line-height: 30px;font-size: 20px;}

            .gain-data { width: 100px;height: 35px;}

            .submit-data { width: 50px;height: 35px;}  

    </style>

布局：

<div class="warp">

        <p class="auth-code">4587</p>

        <input type="text" class="txt" placeholder="请输入验证码">

        <button class="gain-data">获取验证码</button>

        <button class="submit-data">提交</button>

    </div>

jquery代码

<script>

        //方法1：用数组存储数据// var ma=['12tg','34nm','90ml','32cc','67jj','12tg','34nm','95ml','38cc','69jj']

        // setInterval间歇定时器：相隔想用的时间，重复执行

        // setTimeout一次性定时器：延时执行只执行一次

 

        var int = null; //暂时存放定时器

        var time = 3; //自定义设置事件

        $('.gain-data').click(function () {

            $('.gain-data').prop('disabled', true) //'disabled',true可以点击

            if (int) clearInterval(int); //如果代码在一行if后面可以省略{}

            int = setInterval(function () { //开启定时器

                time--; //time=10递减

                $('.gain-data').text(time); //将time的值赋给按钮

                if (time == 0) { //判断time=0时

                    $('.gain-data').text('再次获取'); //给俺扭赋值

                    $('.gain-data').prop('disabled', false) //设置点击

                    clearInterval(int); //清除定时器

                    time = 3; //直接赋值  //var num = 100 num = 10 console.log(num);num=10

                }

            }, 1000)

            var str = 'mnbvcxzasdfghj0123klpoiuytrewq678MNBVCXZLKJH45GFDSAPOIUYT9REWQ'; //字符串  

            var len = str.length; //获取字符串长度

            var num = 4; //设置生成字符串长度

            var code = ''; //接受验证码

            for (var i = 0; i < num; i++) {

                var rand = Math.round(Math.random() * len - 1);

                code += str[rand]

            }

 

            //   var dd=$(this).index()

            //   $(this).prev().prev().text( `${ma[dd]}`)

            $(this).prev().prev().text(code)

        })

        $('.submit-data').click(function () {

            // var tt=$(this).prev().prev().prev().text();

            var tt = $(this).parent().children('.auth-code').text()

            var txt = $(this).parent().children('.txt').val();

            if (tt == txt) {

                alert('尊敬的用户您已验证成功')

            } else {

                alert('验证失败，请重新输入')

                $('.txt').val('')

            }

 

        })

    </script>