一个基于原生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数据对象转化为表格,支持精 ...
随机推荐
- hadoop 部署和调优
一.集群安装 1.在所有的机器上建立相同的用户名,如:hadoop. $adduser hadoop $passwd hadoop 2.在/etc/hosts中添加机器名和IP hadoop@hado ...
- 《java入门第一季》之面向对象(private关键字与封装概念的初探)
/* 定义一个学生类: 成员变量:name,age 成员方法:show()方法 在使用这个案例的过程中,发现了一个问题: 通过对象去给成员变量赋值,可以赋值一些非法的数据.例如:name你赋值了一个3 ...
- 仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
- web.xml 详细介绍
url:http://mianhuaman.iteye.com/blog/1105522#bc2344393 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<l ...
- XMPP系列(四)---发送和接收文字消息,获取历史消息功能
今天开始做到最主要的功能发送和接收消息.获取本地历史数据. 先上到目前为止的效果图: 首先是要在XMPPFramework.h中引入数据存储模块: //聊天记录模块的导入 # ...
- Treemap 有序的hashmap。用于排序
TreeMap:有固定顺序的hashmap.在需要排序的Map时候才用TreeMap. Map.在数组中我们是通过数组下标来对其内容索引的,键值对. HashMap HashMap 用哈希码快速定位一 ...
- Bloom filter 2
1 Bloom filter 计算方法 如需要判断一个元素是不是在一个集合中,我们通常做法是把所有元素保存下来,然后通过比较知道它是不是在集合内,链表.树都是基于这种思路,当集合内元素个数的变大,我们 ...
- 字符编辑技术C语言实现
#include<string.h> #include<ctype.h> #include<stdio.h> /*插入函数 ccode待插入的字符 anystrin ...
- 杭电ACM 1001题
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc=ne ...
- iOS开发常用第三方库
UI 动画 网络相关 Model 其他 数据库 缓存处理 PDF 图像浏览及处理 摄像照相视频音频处理 响应式框架 消息相关 版本新API的Demo 代码安全与密码 测试及调试 AppleWatch ...