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学习笔记 --服务器优化

    Linux服务器优化 序言: 服务器操作建议 1.严格按照目录规范操作服务器 2.远程服务器不允许关机 3.不要在服务器访问高峰运行高负载命令 4.远程配置防火墙时,不要把自己踢出服务器 一.禁用不必 ...

  2. 匿名函数,结合闭包的写法,js对象的案例

    /* * name :Zuoquan Tu * mail :tuzq@XXX.com.cn * date :2015/04/1 * version :1.1 * description:modifie ...

  3. FFMPEG列出DirectShow支持的设备

    FFMPEG列出dshow支持的设备: ffmpeg -list_devices true -f dshow -idummy 举例: 采集摄像头和麦克风 ffmpeg -f dshow -i vide ...

  4. 主流列式数据库评测:InfiniDB

    ).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...

  5. 【资源分享】云计算 CRM 等网上搜集资料

    持续更新,作为抛砖引玉,如果您有更好.更新的资源,望大家分享.共同学习.详细信息尽在 华夏编程社区(HackProLabs)-------------------------------------- ...

  6. java注解及在butternife中的实践和原理

    1.  背景 之前去一个公司,说到了java的注解,问java的注解有几种方式,然后我提到了android中的butternife和afinal注解工具,我们知道butternife在6.1版本的时候 ...

  7. 在 Vim 中设置 Tab 为4个空格

    缩进用 tab 制表符还是空格,这不是个问题,就像 python 用四个空格来缩进一样,这是要看个人喜好的.在 Vim 中可以很方便的根据不同的文件类型来设置使用 tab 制表符或者空格,还可以设置长 ...

  8. 高通Android display架构分析

    目录(?)[-] Kernel Space Display架构介绍 函数和数据结构介绍 函数和数据结构介绍 函数和数据结构介绍 数据流分析 初始化过程分析 User Space display接口 K ...

  9. 关于SharePoint2007简单随感

    首先,还是要感谢我毕业以后的这第一份正式工作,当然现在也依然在做,带我走进了SharePoint的世界,很奇妙也许是有缘吧,自己不是个努力的人,从面试的时候对Moss这个东西闻所未闻,到现在一知半解, ...

  10. Android系统服务详解-android学习之旅(95)

    本文是看完android框架揭秘第六章后的总结 android系统服务提供最基本的,最稳定的核心功能,如设备控制,信息通知,通知设定,以及消息显示等,存在于Android Framework与Andr ...