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. Java进阶(五十一)必须记住的Myeclipse快捷键

    Java进阶(五十一)必须记住的Myeclipse快捷键 在调试程序的时候,我们经常需要注释一些代码,在用Myeclipse编程时,就可以用 Ctrl+/ 为选中的一段代码加上以 // 打头的注释:当 ...

  2. R.java文件介绍

    HelloWorld工程中的R.java文件 package com.android.hellworld; public final class R {     public static final ...

  3. saiku中文维度,补充说明

    saiku在筛选中文维度 会出现浏览器白屏 停止响应的现象,经过跟踪源代码,分析原来在linux 操作系统中 数据库读取的中文和界面选取的编码是不一致的 解决方法, classes\saiku-dat ...

  4. 【Android 应用开发】Android - 按钮组件详解

    总结了Android中常用的按钮用法 示例源码下载地址 : -- CSDN :  http://download.csdn.net/detail/han1202012/6852091 -- GitHu ...

  5. Cocos2d-swift V3.x 中的update方法

    在cocos2d V3.x中update方法如果实现,则会被自动调用;不用向早期的版本那样要显式schedule. 但是你还是要显式schedule其他方法或blocks使用node的schedule ...

  6. iOS开发讲解SDWebImage,你真的会用吗?

    SDWebImage作为目前最受欢迎的图片下载第三方框架,使用率很高.但是你真的会用吗?本文接下来将通过例子分析如何合理使用SDWebImage. 使用场景:自定义的UITableViewCell上有 ...

  7. web报表工具FineReport的SQL编辑框的语法简介

    感谢大家捧场,这里继续分享关于SQL编辑框的一些语法心得总结,因为数据集定义的面板,也是FineReport报表中最常用的模块之一. 1.我理解的执行过程. 这里其实是生成一个字符串,FineRepo ...

  8. 个人Source Insight使用设置笔记

    1.打开SourceInsight, 在菜单栏中点击Options-->Document Options 在显示的对话框中,点击Screen Fonts...., 可改变这个项目的字体,我选的是 ...

  9. OpenCV手写数字字符识别(基于k近邻算法)

    摘要 本程序主要参照论文,<基于OpenCV的脱机手写字符识别技术>实现了,对于手写阿拉伯数字的识别工作.识别工作分为三大步骤:预处理,特征提取,分类识别.预处理过程主要找到图像的ROI部 ...

  10. 设计模式基础:类及类关系的UML表示

    设计模式基础:类及类关系的UML表示 2009-10-26 17:00 by 宗哥, 1891 阅读, 1 评论, 收藏, 编辑 UML中,类关系分为这几种,泛化(generalization), 实 ...