纯js小案例分享(验证码生成及验证)

最新推荐文章于 2022-11-03 10:45:22 发布

itsruaC

最新推荐文章于 2022-11-03 10:45:22 发布

阅读量211

点赞数

文章标签： javascript js html5

本文链接：https://blog.csdn.net/m0_56161594/article/details/117996777

版权

本文是大学生自学前端的小白分享，通过Math.round和Math.random实现简单的验证码生成，内容适合初学者理解，旨在共同进步。

摘要由CSDN通过智能技术生成

本人是个大学生,在自学前端,是个小白,为了促进自己学习,坚持发布博客来督促自己,内容都是简单基本,小白都可以看懂,希望和大家共同进步,冲冲冲

这个小案例主要有两个知识点:

1、验证码生成使用到了Math.round 和 Math.random，Math.round用于取整，因为获取数组的下标值需要是整数，Math.random的作用是使系统随机生成一个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .wrapper{
            width: 300px;
            height: 400px;
            margin: 0 auto;
        }
        span{
            padding-left: 10px;
            font-size: 18px;
            letter-spacing: 10px;
            margin-left: 2px;
            background-color: rgb(200, 250, 233);
        }
        a{
            border: 1px solid;
            padding: 1px;
            cursor:pointer;
        }
        input{
            width: 110px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <span class="code" id="checkCode"></span>
        <a id="renovate">点击刷新</a>
        <br><br>
        <input type="text" placeholder="输入验证码" id="input">

        <button id="btn">确定</button>
    </div>

    <script>
        //窗口刷新执行函数
        window.onload = function(){
            //创建函数
            var res = getCode();
            function getCode(){
                //验证码所用到的数据
                var arr = ['0','1','2','3','4','5','6','7','8','9','a','b',
                           'c','d','e','f','g','h','i','j','k','l','m','n',
                           'o','p','q','r','s','t','u','v','w','x','y','z',];
                //用于保存结果,防止生命周期销毁           
                var str = '';
                //遍历四个数字
                for(var i = 0; i<4;i++){
                    //Math.round四舍五入取整;Math.random令系统随机选取[0.0-1.0)的随机值
                    var num = Math.round(Math.random()*(33-0)+0);
                    str += arr[num];
                }
                return str;        
            }
            //将获取的值传过去
            document.getElementById('checkCode').innerText = res;
            //点击事件
            document.getElementById('renovate').onclick = function(){
                document.getElementById('checkCode').innerText = getCode();
            }

            //提交进行对比
            document.getElementById('btn').onclick = function(){
                var code = document.getElementById('checkCode').innerText;
                var inputCode = document.getElementById('input').value;
                if(code = inputCode){
                    alert('验证通过')
                }else{
                    alert('验证码错误');
                    document.getElementById('input').value = ''
                }
            }
        }
    </script>
</body>
</html>