Vcode.js

一个基于原生JavaScript开发的、轻量的验证码生成插件

V: 1.0.0

DEMO:https://jofunliang.github.io/Vcode.js/example.html

安装

<script src="Vcode.min.js"></script>

OR

// ES6 Modules or TypeScript
import vcode from 'Vcode' // CommonJS
const vcode = require('Vcode')

Support AMD/CMD/ES6 module standard.

使用示例

var vcode1 = new Vcode({
el:"#demo1 .code",
count:4,
fontSize:"60px",
type:"number",
spacing:0
});

参数

attribute typeof description
el string 必需,接受一个包含CSS选择符的字符串,然后用它来匹配一个元素。
data string 可选,您可以自定义验证码的数据源。
count number 可选,验证码的长度,默认为4
type string 可选,验证码的类型,有三种模式,分别是数字模式、字母模式、数字字母随机混合模式。默认是数字字母随机混合模式
fontSize string 可选,验证码的字体大小。
spacing string 可选,验证码的字母间距。默认值为0

new Vcode对象的属性和方法

property typeof description
el object 挂载元素。
code string 验证码。
data string 验证码的数据源。
count number 验证码的长度。
onReset function 重新生成新的验证码。

注:此插件在ie8和ie9浏览器上会降级显示。

一个基于原生JavaScript开发的、轻量的验证码生成插件的更多相关文章

  1. Cardinal:一个用于移动项目开发的轻量 CSS 框架

    Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式.矢量字体.可重用的模块以及一个简单的响应式模块系统.Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的 ...

  2. 基于Node和Electron开发了轻量版API接口请求调试工具——Post-Tool

    Electron 是一个使用 JavaScript.HTML 和 CSS 构建桌面应用程序的框架. 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 Java ...

  3. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  4. faked 一个用于 mock 后端 API 的轻量工具

    一.简介 faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 ...

  5. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  6. 一个关于原生 js 开发一款插件的前端教程

    教程链接: http://www.codeasily.net/course/plugin_course/ 写的不是很好,前面比较松后面比较急,请大家见谅,本人也没多少年前端经验,拿以前写过的教程网站, ...

  7. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力. 本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识. 计算器包括 ...

  8. 基于.netcore 开发的轻量Rpc框架

    Rpc原理详解 博客上已经有人解释的很详细了,我就不在解释了.传送门 项目简介 项目是依赖于.net core2.0版本,内部都是依靠IOC来实现的,方便做自定义扩展.底层的通信是采用socket,s ...

  9. 重构一段基于原生JavaScript的表格绘制代码

    为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...

随机推荐

  1. Linux下编译GDAL

    一.准备工作 从官网下载GDAL.PROJ.4和GEOS,将其存放在/home/liml/Work/3rdPart目录并解压,如下图所示.下载地址请自行Google.注:使用的系统是CentOS6.4 ...

  2. 内存数据网格hazelcast的一些机制原理

    hazelcast作为一个内存数据网格工具,还算比较优秀,听说有Apache顶级项目使用它,值得研究下,使用文档可以直接看官方文档,但机制原理相关的资料基本没有,本人硬撸源码写的一些东西,跟大家分享一 ...

  3. Concurrent包常用方法简介

    1 Executor接口 留给开发者自己实现的接口,一般情况下不需要再去实现.它只有一个方法 void execute(Runnable command) 2 ExecutorService接口 它继 ...

  4. Erlang cowboy http request生命周期

    Erlang cowboy http request生命周期 翻译自: http://ninenines.eu/docs/en/cowboy/1.0/guide/http_req_life/ requ ...

  5. OpenCV混合高斯模型函数注释说明

    OpenCV混合高斯模型函数注释说明 一.cvaux.h #define CV_BGFG_MOG_MAX_NGAUSSIANS 500 //高斯背景检测算法的默认参数设置 #define CV_BGF ...

  6. ruby轻松自删除代码

    因为windows的文件删除机制和unix like的不一样,so不保证如下代码能在windows中使用,哪位童鞋帮我在windows中测试一下也好啊! #!/usr/bin/ruby 5.times ...

  7. Docker 单主机网络

    PS:欢迎大家关注我的公众号:aCloudDeveloper,专注技术分享,努力打造干货分享平台,二维码在文末可以扫,谢谢大家. 当容器逐步向容器集群,容器云技术演进的时候,一个不得不面对的问题就是各 ...

  8. permutations II(全排列 2)

    题目要求 Given a collection of numbers that might contain duplicates, return all possible unique permuta ...

  9. generate parentheses(生成括号)

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  10. 我对AOP的理解

    1.问题 问题:想要添加日志记录.性能监控.安全监测 2.最初解决方案 2.1.最初解决方案 缺点:太多重复代码,且紧耦合 2.2.抽象类进行共性设计,子类进行个性设计,此处不讲解,缺点一荣俱荣,一损 ...