首页 > 其他分享 >验证码插件的使用

验证码插件的使用

时间:2023-05-10 10:12:59浏览次数:33  
标签:mini 插件 验证码 captcha let 使用 captcha1

验证码插件captcha-mini的使用

  1. 使用yarn add captcha-mini命令安装插件

yarn add captcha-mini

  1. js中引入验证码插件
// 引入验证码插件
let Captcha = require('captcha-mini')
  1. 验证码实例化
 // 1: 验证码实例化
    let captcha1 = new Captcha({
        lineWidth: 1,   //线条宽度
        lineNum: 3,       //线条数量
        dotR: 2,          //点的半径
        dotNum: 15,       //点的数量
        preGroundColor: [60, 80],    //前景色区间
        backGroundColor: [150, 250], //背景色区间
        fontSize: 100,           //字体大小
        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
        fontStyle: 'stroke',      //字体绘制方法,有fill和stroke
        content: 'abcdefghijklmnopqrstuvwxyz',  //验证码内容
        length: 4    //验证码长度
    });
  1. 找一变量在外部储存验证码
let code = ''//储存验证码; 
  1. 放入这一句, 动态获取验证码
// 3: 切换验证码会返回新的验证码
    captcha1.draw(document.querySelector('#captcha1'), r => {
        code = r //实时更新验证码
    });

标签:mini,插件,验证码,captcha,let,使用,captcha1
From: https://www.cnblogs.com/lyc00000000/p/17387144.html

相关文章

  • 小程序开发中的插件、组件、控件到底有什么区别?
    ​小程序插件代码由一些自定义组件和JS代码文件构成,插件开发者在发布插件时,这些代码被上传到后台保存起来。当小程序使用插件时,使用者需填写插件的AppID和版本号,就可从后台获取相应的插件代码。小程序代码编译时,插件代码会被嵌入到小程序中,与小程序一起编译运行。由于在小......
  • rocky linux: 禁止使用root登录ssh,只允许指定用户(Rocky Linux 9.1)
    一,配置可以sudo的用户参考这个:https://www.cnblogs.com/architectforest/p/17386259.html二,禁止使用root登录ssh1,配置ssh[root@img~]#vi/etc/ssh/sshd_config配置内容:设置PermitRootLogin值为no#PermitRootLoginyesPermitRootLoginno新增一行:AllowUsers......
  • Java使用wkhtmltopdf实现HTML转pdf
    wkhtmltopdf设置全屏:wkhtmltopdf--disable-smart-shrinking--page-sizeA4-B0-L0-R0-T0test.htmloutput.pdf-B-T-R-L是有效果的,$snappy->setOption('margin-top','0mm');$snappy->setOption('margin-left','0mm'......
  • 界面控件DevExtreme使用指南 - 控制折叠操作 & 键盘支持
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。请注意:在开始本教程之前,请确保DevExtreme已安装在Angula......
  • 使用IDEA远程Debug调试(详细)
    一:前言记得刚工作那会写代码,遇到线上奇怪问题时,就会在可能出现问题的地方大量打log,然后重新打包部署,再对打印的log进行分析;往往这一套流程下来,基本上1个小时左右的时间就这么白白浪费,但要log打的不合理,那么就嘿嘿了,我们要不停的修改代码打log、不停的打包部署。这是何等的浪......
  • 使用MASA全家桶从零开始搭建IoT平台(三)管理设备的连接状态
    目录前言分析方案1:遗嘱消息演示遗嘱消息的使用实施流程方案2:使用WebHook开启WebHook演示Webhook编写代码总结前言获取一个设备的在线和离线状态,是一个很关键的功能。我们对设备下发的控制指令,设备处于在线状态才能及时给我们反馈。这里的在线和离线,我们可以简单的理解为设备......
  • 【关于电脑使用久了无法连接WiFi的解决办法】
    当电脑使用久了会发现忽然连接不上WiFi了,甚至连WiFi的图标都看不到,这种情况一般都是网卡驱动出现了问题解决步骤如下:1.关机重启(有些电脑重启后会自动更新驱动)---->解决2.重启还是不行的话,按下【Win+X】->【设备管理器】->【网络适配器】->右击【有感叹号的驱动】->【卸载设备】-......
  • 下篇:使用jenkins发布go项目到k8s,接上篇的手工体验改造为自动化发布
    写在开篇关于上篇本篇在 《上篇:带你手工体验从写代码、编译、打包镜像、部署到K8S的全过程》 的基础上,将手动的过程通过jenkins工具将其改造成自动化。环境准备我的环境说明:组件安装方式访问IP访问端口jenkinsdocker192.168.11.2548086gitlabdocker192......
  • ubuntu中使用packer
      GitHub-wbthomason/packer.nvim:Ause-packageinspiredpluginmanagerforNeovim.Usesnativepackages,supportsLuarocksdependencies,writteninLua,allowsforexpressiveconfig基本配置,创建~/.config/nvim目录,在目录下创建init.lua文件和lua文件夹,lua文......
  • Qt开发-共享内存使用范例,配合开发者密钥使用后台调试程序或者进入调试模式
    共享内存就之前不是开发了一个Leventure_DeveloperKey用以调试程序嘛,在这里简单聊一下调试模式的方案。这里的调试分为了两种,一种是调试模式,一种是开发者模式。需要这两种模式的原因也很简单:1.在远程调试的时候,我可能需要程序从头开始进入调试,这就要求程序一直卡在开头的某个位......