js 图形验证码制作

实际效果

第一步我们来到要展示验证码的页面，当我们按下营业执照的时候让其，弹出一个弹框，弹框的上面就是验证码，如图一所示：
（图一）

弹框的样式如图二所示：
（图二）

我们要对验证码的值进行校验，判断验证码是否输入正确，当输入不正确的时候，我们提示错误信息，提示信息如图三所示：

（图三）

如果页面了验证正确，这不会提示错误信息并且调到我们的目标页面，如图四所示：

（图四）
——–营业执照页面为私密页面，使用其他页面代替原图。

路由层描述

//1-在路由层进行设置，页面跳转到根目录下/buyer/vshop/info.ejs页面进行跳转，然后在回调函数中进行接口的调用 

        router.get('/buyer/vshop/info', function(req, res, next) {       
//2-调用接口获取数据   

        async.parallel({ 
          verifycode :function(fn){      
 //3-调用接口获取本机的IP地址

        var args= {
           userIp: tools.getClientIp(req)
         };

//4-调用接口verifyCodeHelper的createVcode方法获取captcha与 csnonce的数据，他们的值都是接口verifyCodeHelper返回的数据

            verifyCodeHelper.createVcode(args, function(err, result){
              if (err) {
                console.log(err);
              }
              else{
                fn(null, {
                  captcha: result.data.queryUrl,
                  csnonce: result.csnonce || 0
                })
              }
            });
          }
        },function(err, result){
          if (err) {
            res.end(err);
          }else{
            result.getDetail= res.shopInfo;
            var fxzStatus = res.fxzStatus || {};

//5-进行根目录下buyer/vshop/describe页面的渲染，传递相关参数到EJS页面

            res.render("buyer/vshop/describe", {  
              title: srcBizType==1 ? result.getDetail.name : "店铺简介",
              pageName:"vshopInfo",
              captcha:result.verifycode.captcha,//验证码
              isTencent: 1,
              csnonce:result.verifycode.csnonce
            });
          }
        });
      });

EJS层描述

//1-获取路由传递的 csnonce

    <script>
      APP.newLogin= {
        csnonce: '<%- csnonce %>',
      };
    </script>

//2-获取路由传递的captcha

    <script type="text/javascript" src="<%= captcha %>"></script>

//3-引入相关ＪＳ文件

    <script>
      seajs.use("js_cmd/vshop/home-cmd");
    </script>
    <link href="/css/vshop/describe.css?v=<%= config.version %>" rel="stylesheet" />
    <style id="dynamic"></style>
    <div class="arrow_mask"></div>
    <div class="arrow">
      <div>
        <img src="/imgs/vshop/verification-code-back.png" class="verification-code-back" />
      </div>
      <ul class="arrow-mess"> <span class="sku-close" id="btn_sku_dialog_close"> </span>
        <li>请输入下面的图形验证码</li>
        <li>
            <img id="J_BtnVerifyPicCodeTencent" src="" class="captcha" style="height:30px;margin:0 15px;" />
        </li>
        <li>
          <div class="btn_mes">
            <input class="btn_mes_text" type="text" maxlength="6">
          </div>
        </li>
      </ul>
      <div class="btn_mes2">
        <input type="button" class="license-submit" value="提交">
      </div>
    </div>
    <div data-role="container" class="body <%= pageName %>">
      <header data-role="header">
        <%- include ./widget_vshop %>
      </header>
      <section data-role="body" class="section-body">
        <div class="div-section div-section-info">
          <ul class="info1">
            <li class="gap"><div class="left">所在地</div><div class="right"><%- detail.address%></div></li>
            <li><div class="left">开店时间</div><div class="right"><%- detail.createTime%></div></li>
          </ul>
          <ul class="info2">
            <li class="gap"><div class="left">发货速度</div><div class="right"><%- detail.score.express%></div></li>
            <li class="gap"><div class="left">服务态度</div><div class="right"><%- detail.score.service%></div></li>
            <li><div class="left">描述相符</div><div class="right"><%- detail.score.describe%></div></li>
          </ul>
          <ul class="info3">
            <%if(detail.shopTypeIndex==1||detail.shopTypeIndex==2||detail.shopTypeIndex==3){var bg = '/imgs/vshop/tip.png',color='#39dda5' }else{var bg = '/imgs/vshop/tip3.png',color='#59aaff'}%>
            <li><div class="left anotherC">认证</div><div class="right textR"><span style="background: url(<%-bg%>) left 1px no-repeat;background-size: 14px 12px;"><i style="background: <%-color%>"><%- detail.shopType %></i></span></div></li>
          </ul>
          <ul class="info4">
            <li><a href="tel:<%- detail.phone%>" class="tel">服务电话</a></li>
            <li><a data-aid="<%- aid%>" class="webim">在线客服</a></li>
            <li class="business-license">
              <!--<a href="/buyer/vshop/license?aid=<%- aid%>">-->
              <a href="#">
                <span >营业执照</span>
                <label>查看<span></span></label>
              </a>

            </li>
          </ul>
        </div>
        <%- include ./footer %>
        <div id="vue_hooker">
          <child-nav></child-nav>
          <%- include ../../widget_navBtns %>
        </div> 
      </section>
    </div>

JS层描述

//1-引入页面所需的各个模块
    define(function (require, exports, module) {
      var $ = require("./top-suction-cmd"),
        Vue = require("lib_cmd/vue-cmd"),
        $eles = {},
        eles = {};

  //2-Vue实例化 
      var vm = new Vue({
        data: {},
        methods: {}
      });

  //3- 页面初始化函数

      function initPage() {
        vm.$mount('#vue_hooker');
        window.scroll(0,0);
      }
  //4- 验证码相关处理函数
      function license(){
        $('.info4 .business-license').click(function (ev) { //弹层
          $('.btn_mes_text').val("");
          $('.arrow_mask').show();
          $('.arrow').show();
          $('#nav_omit').remove();
        });
        $('#btn_sku_dialog_close').click(function(ev){//弹窗
          $('.arrow_mask').hide();
          $('.arrow').hide();
          $('.btn_mes_text').val("");
        });

        $('.btn_mes_text').focus(function(){ //输入框获得焦点
          $('.btn_mes_text').val("");
          if($('.verification-code').length!=0){
            $('.verification-code').remove();
          }
        });
        $('.license-submit').click(function(){
          APP.verifyPicCode();
        });

      }

  //5- 验证码初始化函数（） TSOCapObj是腾讯接口里面的方法

      function verify_initPage(){
        $('#J_BtnVerifyPicCodeTencent').on('click', function () {
          TSOCapObj.refresh();
        });
  //6-初始化，参数传入显示验证码的元素imgid
        TSOCapObj.init("J_BtnVerifyPicCodeTencent");
        //刷新拉取验证码图片
        TSOCapObj.refresh();

        APP.verifyPicCode= function(fn) {
          //获取用户输入
          var ans = $(".btn_mes_text").val();
          //验证答案，验证完成后会回调第二个参数传入的函数
          TSOCapObj.verify(ans , function(ret_json){
            if (ret_json.errorCode!=0) {
              $(".btn_mes_text").val("");
              TSOCapObj.refresh();
              //tip("图形验证码输入错误！");
              if($('.verification-code').length==0){
                $('.btn_mes').eq(0).append(" <div class='verification-code'>请输入正确的验证码</div>");
              }
              $('.btn_mes_text').blur(function(){
                $('.btn_mes_text').text("");
              });
            } else {
              window.location="/buyer/vshop/license?aid=" + APP.aid;
              fn(ret_json.ticket);
            }
          });
        }
      }

  //7- 页面初始化函数的执行
      $(function () {
        initPage();
        license();
        verify_initPage();
      });

    });

CCS层描述

@import url(common.css);

    .div-section-info .info4{padding: 0}
    .div-section-info .info4 li{
      padding: 11px 14px;
      line-height: 20px;
      border-bottom: 1px solid #e6e6e6;

    }
    .div-section-info .info4 li a{
      color: #333;

      display: block;
    }
    .div-section-info .info4 li a.tel{
      background: url(/imgs/vshop/callAndMsg.png) no-repeat;  
      background-size: 20px 60px;
       background-position: right 0;
    }
    .div-section-info .info4 li a.webim{
      background: url(/imgs/vshop/callAndMsg.png) no-repeat;  
      background-size: 20px 60px;
      background-position: right -30px;
    }
    .div-section-info .info4 li a label{ 
      display: block;
      float: right;
    }

    .div-section-info .info4 li a label span{ 
      display: block;
      width: 12px;
      height: 12px;
      border-right:1px solid #666;
      border-bottom:1px solid #666;
      -webkit-transform:rotate(-45deg);
      float: right;
      margin-top: 4px;

    }
    .arrow_mask {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 101;
      display: none;
      background: black;
      opacity: 0.7;
    }
    .arrow{
      width: 250px;
      height: 226px;
      background-color: #FFFFFF;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 102;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-radius: 10px;
      display: none;
    }
    .arrow-mess li:nth-of-type(1){
      text-align: center;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333333;
    }
    .arrow-mess li:nth-of-type(2){
      text-align: center;
      margin-bottom: 10px;
    }
    .arrow-mess li:nth-of-type(3) input{
      width: 100%;
      height: 30px;
      border: 1px solid #979797;
      text-align: center;
      border-radius: 3px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0px;
    }
    .btn_mes{
      margin-bottom: 15px;
      width: 100%;
      padding-left: 48px;
      padding-right: 48px;
      position: relative;
    }
    .btn_mes2{
      width: 100%;
      padding-left: 70px;
      padding-right: 70px;
      /* position: relative; */
      position: absolute;
      bottom: 0px;
      margin-bottom: 10px;
    }

    .license-submit{
      width: 100%;
      height: 44px;
      background: #FF534C;
      border: 1px solid #FF534C;
      font-size: 14px;
      border-radius: 4px;
      color: #FFFFFF;
    }

    .sku-close {
      background: url(/imgs/vshop/verification-code-del.png) no-repeat right;
      -webkit-background-size: 25px auto;
      display: inline-block;
      width: 26px;
      height: 26px;
      position: absolute;
      right: 0px;
      top: 0px;
      margin-right: -13px;
      margin-top: -13px;
    }
    .verification-code{
      z-index: 102;
      color: #FFAA00;
      position: absolute;
      font-size: 12px;
      top: 4px;
    }
    .verification-code-back{
      width: 100%;
      position: absolute;
      height: 46px;
    }
    .arrow div:nth-of-type(1){
      position: relative;
    }
    .arrow-mess{
      margin-top: 52px;
    }

# Javascript  # 制作图形验证码  # js  # 验证码制作  # 图像验证码  # JS制作图形验证码实现代码  # JavaScript生成图形验证码  # 原生JavaScript实现简单的图形验证码  # JavaScript实现图形验证码完整代码  # 验证码  # 所示  # 请输入  # 错误信息  # 回调  # 图一  # 都是  # 图二  # 他们的  # 图四  # 腾讯  # 所需  # 提示信息  # 第二个  # 弹出  # 要对  # 如图  # 当我们  # 按下  # 跳转 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  JavaScript Ajax实现异步通信  如何快速辨别茅台真假？关键步骤解析  再谈Python中的字符串与字符编码（推荐）  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  HTML 中动态设置元素 name 属性的正确语法详解  如何在IIS中新建站点并配置端口与IP地址？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  如何快速查询网址的建站时间与历史轨迹？  如何在建站之星网店版论坛获取技术支持？  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  浅谈javascript alert和confirm的美化  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  大同网页,大同瑞慈医院官网？  中山网站制作网页,中山新生登记系统登记流程？  网站制作企业,网站的banner和导航栏是指什么？  高端网站建设与定制开发一站式解决方案 中企动力  C语言设计一个闪闪的圣诞树  常州企业网站制作公司,全国继续教育网怎么登录？  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Java垃圾回收器的方法和原理总结  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  英语简历制作免费网站推荐,如何将简历翻译成英文？  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  html如何与html链接_实现多个HTML页面互相链接【互相】  Android仿QQ列表左滑删除操作  javascript基于原型链的继承及call和apply函数用法分析  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  详解Oracle修改字段类型方法总结  Laravel如何使用Blade模板引擎？（完整语法和示例）  Swift开发中switch语句值绑定模式  香港服务器选型指南：免备案配置与高效建站方案解析  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  Laravel distinct去重查询_Laravel Eloquent去重方法  Laravel怎么判断请求类型_Laravel Request isMethod用法  Laravel Docker环境搭建教程_Laravel Sail使用指南  利用JavaScript实现拖拽改变元素大小  如何在景安服务器上快速搭建个人网站？  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  LinuxCD持续部署教程_自动发布与回滚机制  Windows Hello人脸识别突然无法使用  黑客如何通过漏洞一步步攻陷网站服务器？  微信小程序 wx.uploadFile无法上传解决办法  如何正确下载安装西数主机建站助手？