获取简单验证码

最新推荐文章于 2022-11-21 11:37:57 发布

小七Plus

最新推荐文章于 2022-11-21 11:37:57 发布

阅读量200

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_45334111/article/details/110479794

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单验证码</title>
</head>

<body>
    <input type="text" id="text">
    <button id='yzm' onclick="createCode()">abab</button>
    <input type="button" id="btn" value="获取手机验证码">
    <script>
        function createCode() {
            // 第一种
            // var arr = ['A','B','C'.jjjjjjjjj]
            // 第二种
            // var str = 'abcdefghijklmnopqrstuvwxyz';
            // var arr = str.split("");
            // console.log(arr);
            // 第三种
            // 大写字母的ASCII码值是65-90---小写字母是从97-122
            var count = 0;
            // 小写字母的数组
            var arra = [];
            for (var i = 97; i < 123; i++) {
                arra[count] = String.fromCharCode(i);
                count++;
            }
            // 大写字母的数组        
            for (var i = 65; i < 91; i++) {
                arra[count] = String.fromCharCode(i);
                count++;
            }
            var strNum = '0123456789';
            var arrNum = strNum.split('');
            // 得到A_Z，a_z,0_9
            var randomArr = arra.concat(arrNum);
            console.log(randomArr);
            var str = '';
            for (var i = 0; i < 4; i++) {
                var index = Math.floor(Math.random() * randomArr.length)
                str += randomArr[index];
            }
            // 得到验证码
            document.getElementById('yzm').innerHTML = str;

        }
        // 声明睡眠时间和定时器的ID
        var btn = document.getElementById('btn');
        var sleep = 30;
        var interval = null;
        btn.onclick = function() {
            var oText = document.getElementById('text').value;
            var oYzm = document.getElementById('yzm').innerHTML;
            if (oText.toUpperCase() == oYzm.toUpperCase()) {
                // 防止用户重复点击按钮--我要进入倒计时
                if (interval == null) {
                    alert('验证通过');
                    this.style.backgroundColor = 'red';
                    this.style.cursor = 'wait';
                    this.disabled = true;
                    this.value = '重新发送(' + sleep + ')';
                    interval = setInterval(function() {
                        if (sleep == 0) {
                            clearInterval(interval);
                            interval = null;
                            sleep = 30;
                            btn.style.cursor = 'pointer';
                            btn.disabled = false;
                            btn.value = '获取验证码';
                            btn.style.backgroundColor = '#fff';
                        } else {
                            btn.value = '重新发送(' + sleep + ')';
                            sleep--;

                        }
                    }, 1000)
                }
            } else {
                alert('错误输入，请重新输入验证码');
            }
        }
    </script>
</body>

</html>

小七Plus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取简单验证码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单验证码</title></head><body> <input type.
复制链接

扫一扫