jQuery+CSS五类验证码（字母、数字、滑动、点击）

用到了js插件

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="stylesheet" href="css/verify.css" /><title></title></head><body><h3>Common Verify</h3><div id="verify1" style="margin-top: 30px"></div><button id="check-btn">Confirm</button><div id="verify2" style="margin-top: 30px"></div><button id="check-btn2">Confirm</button><h3 style="margin-top: 30px">Slide Verify</h3><div id="verify3" style="margin-top: 30px"></div><div id="verify4" style="margin-top: 30px"></div><h3 style="margin-top: 30px">Points Verify</h3><div id="verify5" style="margin-top: 30px"></div><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/verify.js"></script><script>$(document).ready(function() {$("#verify1").codeVerify({type: 1,codeLength: 5,width: '200px',height: '30px',fontSize: '30px',btnId: 'check-btn',success: function() {alert("verify 1 match");},error: function() {alert("verify 1 mismatch");}})$("#verify2").codeVerify({type: 2,figure: 100,width: '200px',height: '30px',fontSize: '30px',btnId: 'check-btn2',success: function() {alert("verify 2 match");},error: function() {alert("verify 2 mismatch");}})$("#verify3").slideVerify({type: 1,vOffset: 3,barSize: {width: '300px',height: '40px'},success: function() {alert("verify 3 match");},error: function() {alert("verify 3 mismatch");}})$("#verify4").slideVerify({type: 2,vOffset: 3,imgName: ['1.jpg', '2.jpg'],imgSize: {width: '300px',height: '160px'},blockSize: {width: '30px',height: '30px'},barSize: {width: '300px',height: '30px'},success: function() {alert("verify 3 match");},error: function() {alert("verify 3 mismatch");}})$("#verify5").pointsVerify({defaultNum: 6,checkNum: 4,vSpace: 2,imgName: ['1.jpg', '2.jpg'],imgSize: {width: '300px',height: '160px'},barSize: {width: '300px',height: '30px'},success: function() {alert("verify 5 match");},error: function() {alert("verify 5 mismatch");}})})</script></body>
</html>

演示：

在线运行源代码：https://gitnlf9527.github.io/Demo/jQuery+CSS五类验证码（字母、数字、滑动、点击）.html

jQuery+CSS五类验证码（字母、数字、滑动、点击）相关推荐

利用深度学习(CNN)进行验证码(字母+数字)识别
利用深度学习(CNN)进行验证码(字母+数字)识别_helen1313的专栏-CSDN博客本文方法针对的验证码为定长验证码,不包含中文. 本文的思路是:1. 使用keras中预训练好的模型,在pyt ...
css怎么控制两个字母,css英文字母数字自动换行且不断词方法
本文章来给各位同学介绍css怎样让英文字母数字自动换行且不断词方法总结,有需要了解的同学可进入参考. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自 ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
PHP字母数字验证码和中文验证码
1:字母数字组合的验证码 HTML代码: 1 验证码:<input type="text" name="code"> 2 <img oncli ...
【5分钟教你】3种实现验证码功能-数字短信验证码-图形验证码-滑动验证码
摘要:我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验 ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
字母数字、字母、汉字验证码（java）
一.字母数字,字母,汉字验证码的生成代码 1.字母数字验证码: package com.soufun; import java.awt.Color; import java.awt.Font; imp ...
html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...

jQuery+CSS五类验证码（字母、数字、滑动、点击）

jQuery+CSS五类验证码（字母、数字、滑动、点击）相关推荐

最新文章

热门文章