HTML系列:编写四位数验证码

编写四位数验证码

验证码类型:
=> 数字+字母
=> 找图片
=> 滑动拼图
=> 问答类
=> 点击汉字拼成语
=> 倒着的文字或者图片正过来

<!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>

效果如下点击更新:
在这里插入图片描述

你可能感兴趣的:(HTML系列)