一个基于原生JavaScript开发的、轻量的验证码生成插件
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开发的、轻量的验证码生成插件的更多相关文章
- Cardinal:一个用于移动项目开发的轻量 CSS 框架
Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式.矢量字体.可重用的模块以及一个简单的响应式模块系统.Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的 ...
- 基于Node和Electron开发了轻量版API接口请求调试工具——Post-Tool
Electron 是一个使用 JavaScript.HTML 和 CSS 构建桌面应用程序的框架. 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 Java ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- faked 一个用于 mock 后端 API 的轻量工具
一.简介 faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 ...
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
- 一个关于原生 js 开发一款插件的前端教程
教程链接: http://www.codeasily.net/course/plugin_course/ 写的不是很好,前面比较松后面比较急,请大家见谅,本人也没多少年前端经验,拿以前写过的教程网站, ...
- 原生javascript开发计算器实例
计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力. 本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识. 计算器包括 ...
- 基于.netcore 开发的轻量Rpc框架
Rpc原理详解 博客上已经有人解释的很详细了,我就不在解释了.传送门 项目简介 项目是依赖于.net core2.0版本,内部都是依靠IOC来实现的,方便做自定义扩展.底层的通信是采用socket,s ...
- 重构一段基于原生JavaScript的表格绘制代码
为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...
随机推荐
- 你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接: 5 Ways that CSS and JavaScript Interact That You ...
- Xp输入法不见了
早上打开电脑忽然发现以前的输入法(包括搜狗,智能ABC输入法)都不见了,光剩下微软拼音,而且添加输入法的按键是灰色的,不能使用 解决的办法: 打开记事本,输入以下内容: ___________ ...
- Process Order API - How To Scripts
In this Document Purpose Questions and Answers References APPLIES TO: Oracle Order Management ...
- 【45】java的封装剖析
类是构造对象的模板或蓝图. 封装的一些概念 从形式上看,封装不过是将数据和行为组合到一个包中,并对对象的使用者隐藏了数据的实现形式. 每个对象都包含实例域和方法.实例域的集合代表了一个集合的状态,通过 ...
- 做自己的软件的Gallery(一)
先上效果图: 如图,android默认也有Gallery,很多软件在调用时,都是使用自己的Gallery,一方面好维护,另外一方面可以做优化.要做成以上样式,图片加载类起至关重要,一不小心,就好OOM ...
- 高通 android平台LCD驱动分析
目前手机芯片厂家提供的源码里包含整个LCD驱动框架,一般厂家会定义一个xxx_fb.c的源文件,注册一个平台设备和平台驱动,在驱动的probe函数中来调用register_framebuffer(), ...
- InvocationTargetException异常解析
InvocationTargetException异常由Method.invoke(obj, args...)方法抛出.) { throw new ZeroException("参数不能小于 ...
- Android的Binder的起源-android学习之旅(100)
George Hoffman任职1991年Be公司的工程师,他启动了一个"openBinder"的项目,该项目的宗旨是研究一个高效的信号传递工具,允许多个软件相互合作,构成一个软件 ...
- javascript中正则表达式和ruby中的一点差异
看到一个例子,不过这个例子中正则表达式的格式貌似是错的: Function.prototype.get_name = function(){ return this.name || this.toSt ...
- 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 常见的聚合操 ...