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

编程之家收集整理的这篇文章主要介绍了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);

		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,.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 页面均可调用全部内容,希望文章能够帮你解决Jquery实现验证码功能 完美效果 jsp php 页面均可调用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录。 下面是嵌套js的html文件: 效果图: 以下是放在服务器的有关地名xml文件:
1 无穷滚动(无限加载)与分页的比较 现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心。 而无
此前在浏览一些网站的时候,发现他们网站的图片都是你“鼠标”滚到哪,图片才会加载显示。当时觉得好神奇,怎么会这么“跟手”呢。核心原理是:1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视
1.开关灯效果 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;U
什么是事件冒泡 &lt;div &quot;width: 200px;height: 200px;background: red;margin: 200px auto;&quot; onc
Allot Transfer $(document).ready(function() { $(&#39;input[type=radio][name=bedStatus]&#39;).change(
目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); //获取到canvas
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($(&quot;#&quot;+id).val());例如:使用id设置隐藏控件 $(&quot;.img&quot;).mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/&amp;lt;a id=&quot;(...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注