VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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生成随机验证码代码实例

    广而告之:
    热门推荐:
    纯CSS3打造属于自己的“小黄人”

    效果就像这样: 不废话,直接上代码! hrml代码: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html>   <head lang="zh">       <meta charset="UTF-8&q···

    如何使用PHP编程说明第1/3页

    但是,要成为一名PHP编程高手却并不容易。并不像很多人想象的那样,只要能够飞快地编写几条简单的代码去解决一个复杂的问题就是PHP编程高手了,真正的PHP高手还需要考虑更多的其它问题。以下三条准则是一名成熟的PHP程序员在编程中应该首先遵循的准则。 1.懒惰是金 2.编···

    手机浏览器Viewport 参数(web前端设计)

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的&···

    解决Linux下php-fpm进程过多导致内存耗尽问题

    最近,发现个人博客的Linux服务器,数据库服务经常挂掉,导致需要重启,才能正常访问,极其恶心,于是决心开始解决问题,解放我的时间和精力(我可不想经常出问题,然后人工重启,费力费时)。 分析问题 发现问题以后,首先使用 free -m 指令查看当前服务器执行状况: 可以看···

    jQuery+Ajax+PHP“喜欢”评级功能实现代码

    本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反···

    CSS属性之定位属性(图文详解)

    CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍。 相对定位 相对定位:让元素相对于自己原来的位置···

    php+ajax实现商品对比功能示例

    本文实例讲述了php+ajax实现商品对比功能。分享给大家供大家参考,具体如下: 商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){ var n=10; var obj=document.getElementById("goods-compare"); if(!obj){ return false; } var x=0; windo···

    php的$

    我想有跟我一样的想法的人会这样处理的: 上传的文件只是想临时使用,不需要把原文件保存备用,如resize之类的操作,且这些后期的操作会出现在第二轮从客户端请求时才操作的,如先上传,把上传的临时文件路径返回到浏览器,用户点击后再对这个临时文件进行操作;可是在实际的实现···

    PHP合并两个或多个数组的方法

    使用运算符“+” PHP的数组运算符“+”可以用来联合两个(或多个数组)。 <?php header("content-type:text/html;charset=utf-8"); $x = array("red", "green","orange"); $y = array("red","blue","yellow","cyan"); $z = $x + $y; // $x 与 $y 的联合 var_dump($···

    微信小程序下拉框搜索功能的实现方法

    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height···