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. 你可能不知道的5种 CSS 和 JS 的交互方式

    翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接:  5 Ways that CSS and JavaScript Interact That You ...

  2. Xp输入法不见了

    早上打开电脑忽然发现以前的输入法(包括搜狗,智能ABC输入法)都不见了,光剩下微软拼音,而且添加输入法的按键是灰色的,不能使用 解决的办法: 打开记事本,输入以下内容:    ___________ ...

  3. Process Order API - How To Scripts

    In this Document   Purpose   Questions and Answers   References APPLIES TO: Oracle Order Management ...

  4. 【45】java的封装剖析

    类是构造对象的模板或蓝图. 封装的一些概念 从形式上看,封装不过是将数据和行为组合到一个包中,并对对象的使用者隐藏了数据的实现形式. 每个对象都包含实例域和方法.实例域的集合代表了一个集合的状态,通过 ...

  5. 做自己的软件的Gallery(一)

    先上效果图: 如图,android默认也有Gallery,很多软件在调用时,都是使用自己的Gallery,一方面好维护,另外一方面可以做优化.要做成以上样式,图片加载类起至关重要,一不小心,就好OOM ...

  6. 高通 android平台LCD驱动分析

    目前手机芯片厂家提供的源码里包含整个LCD驱动框架,一般厂家会定义一个xxx_fb.c的源文件,注册一个平台设备和平台驱动,在驱动的probe函数中来调用register_framebuffer(), ...

  7. InvocationTargetException异常解析

    InvocationTargetException异常由Method.invoke(obj, args...)方法抛出.) { throw new ZeroException("参数不能小于 ...

  8. Android的Binder的起源-android学习之旅(100)

    George Hoffman任职1991年Be公司的工程师,他启动了一个"openBinder"的项目,该项目的宗旨是研究一个高效的信号传递工具,允许多个软件相互合作,构成一个软件 ...

  9. javascript中正则表达式和ruby中的一点差异

    看到一个例子,不过这个例子中正则表达式的格式貌似是错的: Function.prototype.get_name = function(){ return this.name || this.toSt ...

  10. hive的高级查询(group by、 order by、 join 、 distribute by、sort by、 clusrer by、 union all等)

    查询操作 group by. order by. join . distribute by. sort by. clusrer by. union all 底层的实现 mapreduce 常见的聚合操 ...