交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • js实现随机8位验证码

    开发思路:

    1.画出放置验证码的模块、一个写有“看不清…”的小块,以及输入验证码的文本框
    2.获取各个模块
    3.封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文。每种类型出现的可能性为25%。
    4.随机数字在0-9,之间。对Math.ramand()向下取整。
    5.随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如:

    var n = String.fromCharCode(65);
    cosole.log(n);
    //输出j结果为A
    

    大写字母(65-91) 小写字母(97-123)

    var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
    var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

    6.随机中文,声明变量letter放置中文字符串,使用charAt()随机在letter中获得某个汉字。

    var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
    var s = letter.charAt(Math.floor(Math.random() * letter.length));

    7.给每位验证码设随机的颜色,字体大小,相对文本位置,旋转角度。给颜色封装一个函数,使用十六进制颜色(如:#ffffff)

    //随机颜色
     function fontcolor(){
        var s1="";
        for(var k=0;k<6;k++){
         var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
         var m=z[Math.floor(Math.random() * z.length)];
         s1 +=m;
        }
        return "#"+s1;
       }

    随机位置和随机旋转角度的方法相同

    随机位置可能为向上下左右偏移 8px, 随机旋转角度可能为绕着z轴旋转(±45度)。

    8.提前声明一个空字符串 str 让每位验证码用字符串连接起来.

    var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
    str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
     arr+=s;

    9.让8位验证码出现在第一个大模块中的innerHTML中。

    10.给写有“看不清”的span标签添加点击事件,点击时,调用函数Yan_ma,刷新验证码。

    11.如果输入的验证码不正确,则弹出“验证成功”,否则弹出“验证失败”。

    <!DOCTYPE html>
    <html>
    <head lang="en">
     <meta charset="UTF-8">
     <title>随机验证码</title>
     <script>
      var arr="";
      window.onload=function() {
       var maa = document.getElementsByClassName("block")[0];
       var looking = document.getElementById("look");
       var put = document.getElementById("text");
       var btnn = document.getElementById("btn");
       Yan_ma(maa);
       looking.onclick=function (){
        Yan_ma(maa);
       };
       btnn.onclick=function(){
        if(put.value.toLowerCase()==arr.toLowerCase()){
         alert ("验证成功");
        }
        else{
         alert ("验证失败");
         Yan_ma(maa);
        }
       }
    
      };
    
    
        function Yan_ma(aim) {
        arr ="";
        var str="";
        for (var i = 0; i < 8; i++) {
         //随机数 Math.random 0-1 的随机值
         var n = Math.random();
         //随机颜色
         var color=fontcolor();
         //随机大小
         var size=Math.floor (Math.random ()*12 +20);
         //随机位置
         var g=Math.random() <0.5 ? -1: 1;
         var topset=Math.random ()*g*8;
         //随机旋转
         var h=Math.random() <0.5 ? -1: 1;
         var zhuan=Math.random ()*h*45;
         if (n < 0.25) {
          //随机数字
          var s = Math.floor(Math.random() * 10);
          str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
          arr+=s;
         }
         //随机大写字母 //65-91
         else if (n >= 0.25 && n < 0.5) {
          var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
          str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
          arr+=s;
         }
         //随机小写字母 97-123
         else if (n >=0.5 && n < 0.75) {
          var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
          str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
          arr+=s;
         }
         //随机文字
         else {
          var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
          var s = letter.charAt(Math.floor(Math.random() * letter.length));
          str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";
          arr+=s;
         }
        }
        aim.innerHTML =str;
       }
    
       function fontcolor(){
        var s1="";
        for(var k=0;k<6;k++){
         var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
         var m=z[Math.floor(Math.random() * z.length)];
         s1 +=m;
        }
        return "#"+s1;
       }
    
     </script>
     <style>
      .block{
       width:250px;
       height:60px;
       background:url("bg2.png") no-repeat center;
       background-size: 100%;
       text-align: center;
       line-height: 60px;
      }
      .block span{
       position: relative;
       display: inline-block;
       width:20px;
       margin:5px 3px;
      }
      #look{
       color: #9200ff;
      }
      #look:hover{
       cursor: pointer;
      }
     </style>
    </head>
    <body>
    <div class="block">
    </div>
    <span id="look">看不清...</span>
    <br/>
    <input type="text" id="text" placeholder="请输入验证码" />
    <button id="btn">验证</button>
    </body>
    </html>

    出现的验证码

    当输入正确验证码时

    当没输入错误验证码时

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • JavaScript实现随机五位数验证码
    • php/JS实现的生成随机密码(验证码)功能示例
    • 基于JS实现一个随机生成验证码功能
    • js实现随机数字字母验证码
    • js随机生成一个验证码
    • JS 实现随机验证码功能
    • JavaScript 随机验证码的生成实例代码
    • JavaScript生成随机验证码代码实例

    广而告之:
    热门推荐:
    伪原创文章我们要修改多少内容才行

      大家都知道搜索引擎和用户都是喜欢原创内容的,这也是为什么很多博客的那么好和人气那么旺的原因。但随着战群和采集的出现,好多网站的文章都开始进行大量地伪原创了,那么伪原创文章要伪到什么程度呢?   一开始的时候拿过百度站长指南的文章做实验,由于没有作修饰和···

    微信小程序 switch组件详解及简单实例

    微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  微信小程序 form 微信小程序 checkbox 实现效果图···

    PHP实现找出数组中出现次数超过数组长度一半的数字算法示例

    本文实例讲述了PHP实现找出数组中出现次数超过数组长度一半的数字算法。分享给大家供大家参考,具体如下: <?php * 算法要求:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字。 * * 算法分析:我们需要计算数组中每个数字的出现次数。在PHP中我们可以使···

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head>···

    从零到一详聊创建Vue工程及遇到的常见问题

    准备工作 1.判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm。 2.开发工具选择很多,VUE无专用开发工具,开发项目多以SPA形式体现,本例使用 Visual Studio Code。 3.调试工具选择很多,官···

    ES6基础之字符串和函数的拓展详解

    本文实例讲述了ES6基础之字符串和函数的拓展。分享给大家供大家参考,具体如下: 字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes()、startsWith()、endsWidth() 三个方法用于判断某一字符串是否包含于另一字符串 i···

    织梦dedecms自定义表单限制IP24小时只能提交一次

      打开plus下diy.php文件 找到 if(!is_array($diyform))         {             showmsg('自定义表单不存在', '-1');      ···

    oracle数据库冷备份的方法

    冷备份是数据库文件的物理备份,通常在数据库通过一个shutdown normal或shutdown immediate 命令正常关闭后进行。当数据库关闭时,其使用的各个文件都可以进行备份。这些文件构成一个数据库关闭时的一个完整映像。冷备份通常要备份以下文件:所有数据文件所有控制文件所有联机···

    vue项目中jsonp跨域获取qq音乐首页推荐问题

    自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目。在项目中也是遇到了很多的问题。 接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错。 第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装。 使用 npm 引入,输入: ···

    .Net中的集合排序可以这么玩你知道吗

    C#集合类型概述 集合是.NET FCL(Framework Class Library)中很重要的一部分。所有的集合类都继承自IEnumerable。集合类总体可分为一下几类:关联/非关联型集合,顺序/随机访问集合,顺序/无序集合,泛型/非泛型集合,线程安全集合。 各集合类底层接口关系图 背景: public c···