一个基于原生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数据对象转化为表格,支持精 ...
随机推荐
- Linux学习笔记 --服务器优化
Linux服务器优化 序言: 服务器操作建议 1.严格按照目录规范操作服务器 2.远程服务器不允许关机 3.不要在服务器访问高峰运行高负载命令 4.远程配置防火墙时,不要把自己踢出服务器 一.禁用不必 ...
- 匿名函数,结合闭包的写法,js对象的案例
/* * name :Zuoquan Tu * mail :tuzq@XXX.com.cn * date :2015/04/1 * version :1.1 * description:modifie ...
- FFMPEG列出DirectShow支持的设备
FFMPEG列出dshow支持的设备: ffmpeg -list_devices true -f dshow -idummy 举例: 采集摄像头和麦克风 ffmpeg -f dshow -i vide ...
- 主流列式数据库评测:InfiniDB
).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...
- 【资源分享】云计算 CRM 等网上搜集资料
持续更新,作为抛砖引玉,如果您有更好.更新的资源,望大家分享.共同学习.详细信息尽在 华夏编程社区(HackProLabs)-------------------------------------- ...
- java注解及在butternife中的实践和原理
1. 背景 之前去一个公司,说到了java的注解,问java的注解有几种方式,然后我提到了android中的butternife和afinal注解工具,我们知道butternife在6.1版本的时候 ...
- 在 Vim 中设置 Tab 为4个空格
缩进用 tab 制表符还是空格,这不是个问题,就像 python 用四个空格来缩进一样,这是要看个人喜好的.在 Vim 中可以很方便的根据不同的文件类型来设置使用 tab 制表符或者空格,还可以设置长 ...
- 高通Android display架构分析
目录(?)[-] Kernel Space Display架构介绍 函数和数据结构介绍 函数和数据结构介绍 函数和数据结构介绍 数据流分析 初始化过程分析 User Space display接口 K ...
- 关于SharePoint2007简单随感
首先,还是要感谢我毕业以后的这第一份正式工作,当然现在也依然在做,带我走进了SharePoint的世界,很奇妙也许是有缘吧,自己不是个努力的人,从面试的时候对Moss这个东西闻所未闻,到现在一知半解, ...
- Android系统服务详解-android学习之旅(95)
本文是看完android框架揭秘第六章后的总结 android系统服务提供最基本的,最稳定的核心功能,如设备控制,信息通知,通知设定,以及消息显示等,存在于Android Framework与Andr ...