教你最简单的方式编写四位数验证码编写四位数验证码效果如下点击更新：

编写四位数验证码

验证码类型:

数字+字母

找图片

滑动拼图

问答类

点击汉字拼成语

倒着的文字或者图片正过来 ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #codeBox {
        display:inline-block;
        width:80px;
        height: 35px;
        line-height:35px;
        border:1px solid #AAA;
        text-align:center;
        font-size:18px;
        letter-spacing: 5px;
       }
       #link {
           display:inline-block;
           text-decoration:none;
       }
    </style>
</head>
<body>
    <div id="codeBox">
     Ab4F
    </div>
    <a href="javascript:;" id="link">看不清楚，换一张</a>
    <!-- 阻止点击a标签的默认行为 -->

    <script>
      var codeBox=document.getElementById('codeBox');
          link=document.getElementById('link');
          //=>编写一个获取四位的随机验证码方法
      function queryCode() {
        //准备验证码获取的范围（索引“：0-61）
        var codeArea = 'qwertyuiopasdfghjklzxcvbnm'+
        'QWERTYUIOPASDFGHJKLZXCVBNM'+
        '1234567890';
        //我们需要准备四个索引，在code-area中通过char-at方法获取四个字符，把四个字符串拼接成一个字符串就是验证码
        //codeArea[0]/codeArea.charAt(0)
        var result = '';
        for (var i=0; i<4;i++){  //循环四次
           var n=Math.round(Math.random() * 61); //=>(61-0)+0
               char=codeArea.charAt(n);
               //Math.round(Math.random()*(m-n)+n)：获取n-m之间的随机整数
            result += char;
            // result=char+result;
        }
        return result;
      }
      //=> 开始加载页面就需要生成一个验证码
      codeBox.innerHTML = queryCode(); //执行方法，把return四位验证码插入在code-Box盒子
      link.onclick = function (){
          codeBox.innerHTML = queryCode();
      }
    </script>
</body>
</html>

效果如下点击更新：