Jquery实现验证码功能完美效果 jsp php 页面均可调用

验证码实现效果如下：

生成验证码的方法：

生成验证码随机背景颜色

在html中引用

完整源码下载地址：

验证码实现效果如下：

生成验证码的方法：

function code_draw() {var canvas_width = $('#canvas').width();var canvas_height = $('#canvas').height();var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台canvas.width = canvas_width;canvas.height = canvas_height;var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; //取值范围var aCode = sCode.split(",");var aLength = aCode.length; //获取到数组的长度var value = [];for (var i = 0; i <= 3; i++) {var j = Math.floor(Math.random() * aLength); //获取到随机的索引值var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度var txt = aCode[j]; //得到随机的一个内容value[i] = txt.toLowerCase();var x = 10 + i * 20; //文字在canvas上的x坐标var y = 20 + Math.random() * 8; //文字在canvas上的y坐标context.font = "bold 23px 微软雅黑";context.translate(x, y);context.rotate(deg);context.fillStyle = code_randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}// 将生成的值以属性的方法添加到元素value = value.join("");$('#canvas').attr('data-code', value)//验证码上显示线条for (var i = 0; i <= 5; i++) {context.strokeStyle = code_randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);context.stroke();}//验证码上显示小点for (var i = 0; i <= 30; i++) {context.strokeStyle = code_randomColor();context.beginPath();var x = Math.random() * canvas_width;var y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}
}

生成验证码随机背景颜色

function code_randomColor() { //得到随机的颜色值var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";
}

在html中引用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery canvas验证码</title><style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}html {width: 100%;height: 100%;font-size: 16px;}body {width: 100%;height: 100%;-moz-user-select: none;/*火狐*//*禁止用户在页面选择文字*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;}.code {padding-top: 50px;width: 400px;margin: 0 auto;}.input-val {width: 295px;background: #ffffff;height: 2.8rem;padding: 0 2%;border-radius: 5px;border: none;border: 1px solid rgba(0, 0, 0, .2);font-size: 1.0625rem;}#canvas {float: right;display: inline-block;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;}.btn {width: 100px;height: 40px;background: #f1f1f1;border: 1px solid #ccc;border-radius: 5px;margin: 20px auto 0;display: block;font-size: 1.2rem;color: #e22e1c;cursor: pointer;}</style></head><body><div class="code"><input type="text" value="" placeholder="验证码" class="input-val" /><canvas id="canvas" width="100" height="43"></canvas><button class="btn">提交</button></div></body>

完整源码下载地址：

https://download.csdn.net/download/weixin_42350212/13778347

Jquery实现验证码功能完美效果 jsp php 页面均可调用相关推荐

element-plus+vite+guiplan注册页面添加验证码功能
element-plus+vite+guiplan注册页面添加验证码功能 element-plus+vite+guiplan注册页面添加验证码功能介绍步骤总结 element-plus+vite ...
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
html实现验证码效果,js实现验证码功能
本文实例为大家分享了js实现验证码功能的具体代码,供大家参考,具体内容如下 #前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面首先在页面中准备一个输入框,一个显示验证码的盒子和一 ...
html5 jq点赞功能,jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model ...
java输入验证码代码,JavaWeb 实现验证码功能(demo)
验证码不用多说,在 WEB-APP 中一般应用于:登录.注册.买某票.秒杀等场景.大家都接触过~可以说是千奇百怪,各式各样. DEMO 目标功能验证码页面输入. 页面更换验证码(异步实现). 后台验 ...
Struts2 整合jQuery实现Ajax功能
为什么80%的码农都做不了架构师?>>> Struts2 整合jQuery实现Ajax功能技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝 ...
javaweb实现验证码功能
在javaweb的用户注册与登陆功能时,有时为了防止漏洞或者大量注册,可以使用验证码功能,下面是验证码的一个简单实现验证码类 public class ValiImg extends HttpSer ...
Servlet验证码功能
Servlet验证码功能创建验证码生成Servlet package com.pc.verifycode;import java.awt.Color; import java.awt.Font; i ...
vb.net——通过邮箱动态发送验证码实现完美注册
[ 背景] 平时不管我们注册哪个网站,想必大家都注意到必须使用有效的电话号码或邮箱号码,为什么呢?因为他们都要求动态发送验证码,然后通过验证验证码的真伪,来有效避免胡乱注册的现象. 那么,在高校云平 ...

Jquery实现验证码功能完美效果 jsp php 页面均可调用

验证码实现效果如下：

生成验证码的方法：

生成验证码随机背景颜色

在html中引用

完整源码下载地址：

Jquery实现验证码功能完美效果 jsp php 页面均可调用相关推荐

最新文章

热门文章

Jquery实现验证码功能 完美效果 jsp php 页面均可调用

验证码实现效果如下：

生成验证码的方法：

生成验证码随机背景颜色

在html中引用

完整源码下载地址：

Jquery实现验证码功能 完美效果 jsp php 页面均可调用相关推荐

最新文章

热门文章

Jquery实现验证码功能完美效果 jsp php 页面均可调用

Jquery实现验证码功能完美效果 jsp php 页面均可调用相关推荐