JavaScript+html实现前端页面随机二维码验证
分享炫酷的前端页面随机二维码验证，供大家参考，具体内容如下
直接上代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入jquery的js -->
<script type="text/javascript" src="../jquery/jquery.js"></script>
</head>
<style>
.input-val {
width: 200px;
height: 32px;
border: 1px solid #ddd;
box-sizing: border-box;
}
#canvas {
vertical-align: middle;
box-sizing: border-box;
border: 1px solid #ddd;
cursor: pointer;
}
.btn {
display: block;
margin-top: 20px;
height: 32px;
width: 100px;
font-size: 16px;
color: #fff;
background-color: #457adb;
border: none;
border-radius: 50px;
}
</style>
<body>
<div class="code">
<input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val">
<canvas id="canvas" width="100" height="30"></canvas>
<button class="btn">提交</button>
</div>
</body>
<script>
$(function(){
var show_num = [];
draw(show_num);
$("#canvas").on('click',function(){
draw(show_num);
})
$(".btn").on('click',function(){
var val = $(".input-val").val().toLowerCase();
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
alert('提交成功！');
$(".input-val").val('');
// draw(show_num);
}else{
alert('验证码错误！请重新输入！');
$(".input-val").val('');
// draw(show_num);
}
})
})
//生成并渲染出验证码图形
function draw(show_num) {
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,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,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;//获取到数组的长度
for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var deg = Math.random() - 0.5; //产生一个随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[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 = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = 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 = 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 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 + ")";
}
</script>
</html>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Jsp生成页面验证码的方法[附代码]
image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下: 复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran
-
JS自动生成动态HTML验证码页面
本文为大家分享了JS自动生成动态HTML验证码页面,输入错误自动清空输入框功能,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>验证码</title> <meta charset="utf-8" /> <style type="text/css"> #code { font-family: Arial; font-style: it
-
JQuery验证jsp页面属性是否为空(实例代码)
说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务逻辑层和控制层基本没有任何关系. 限制提交的方法可以是在form标签里限制,也可以是在submit按钮上添加onclick事件限制: <form action=".." method="post" onsubmit="return check();
-
原生js验证简洁注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
-
php用户注册页面利用js进行表单验证具体实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht
-
HTML页面登录时的JS验证方法
开发一个注册的HTML页面, 用于搜集用户的注册信息.包括: 姓名(不能为空), 年龄(必须超过17岁), 体重(30-150kg), 班级(下拉列表),登陆密码(至少8位长).确认密码(和登录密码一致),Email(不能为空) , 电话,QQ, 个人简历等信息. 并针对这些表的元素来创建相应的验证,如果检测到错误, 在输入框后面用红色的字显示错误.要用到前面几节学习过的单行文本输入框text.下拉列表框select.密码输入框password.多行文本输入框textarea.这是一个较实用的用
-
js正则表达式注册页面表单验证
正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
-
JavaScript+html实现前端页面随机二维码验证
分享炫酷的前端页面随机二维码验证,供大家参考,具体内容如下 直接上代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <!--引入jquery的js --> <script type="text/javascript"
-
JavaScript生成二维码图片小结
摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源.广告推送.网站链接.数据下载.商品交易.定位/导航.电子商务应用.车辆管理.信息传递等.如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口
-
jQuery 生成svg矢量二维码
jQuery 生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力. 代码如下所示: <html> <head> <title>jQuery 生成svg矢量二维码</title> </head> <body> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scr
-
php生成带logo二维码方法小结
一.使用的类库 1.phpqrcode(php库) 2.qrcode.js(javascript库) 二.phpqrcode的使用 只用php的类库,也就是二维码的生成在后台操作.因为要在后台生成带logo的二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader) phpqrcode使用方法: 首先下载phpqrcode:http://phpqrcode.sourceforge.net/ 然后在使用之前记得引入phpqrcode.php文件 $value = $u
-
jquery插件qrcode在线生成二维码
随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维
-
jQuery qrcode生成二维码的方法
现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览. 以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页. 这样做不能每个页面都生成二维码. jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件.它是独立的,最小压缩之后不足4k,也没有图片下载请求.引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到 https:/
-
详解基于Koa2开发微信二维码扫码支付相关流程
前段时间在开发一个功能,要求是通过微信二维码进行扫码支付.这个情景我们屡见不鲜了,各种电子商城.线下的自动贩卖机等等都会有这个功能.平时只是使用者,如今变为开发者,也是有不小的坑.所以特此写一篇博客记录一下. 注: 要开发微信二维码支付,你必须要有相应的商户号的权限,否则你是无法开发的.若无相应权限,本文不推荐阅读. 两种模式 打开微信支付的文档,我们可以看到两种支付模式:模式一和模式二.这二者的流程图微信的文档里都给出了(不过说实话画得真的有点丑). 文档里指出了二者的区别: 模式一开发前,商
-
Java Spring boot实现生成二维码
目录 一.引入springboot依赖: 二.工具类代码: 三.调用工具类生成二维码 1.将链接生成二维码图片并保存到指定路径 2.将链接生成二维码直接显示在页面 3.将以get请求传参链接生成二维码 总结 一.引入spring boot依赖: <!--引入生成二维码的依赖--> <!-- https://mvnrepository.com/artifact/com.google.zxing/core --> <dependency> <groupId>co
-
微信QQ的二维码登录原理js代码解析
在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为例子看看吧: 首先说下整个授权流程: 在客户端网页中会不断向服
-
js微信扫描二维码登录网站技术原理
微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能.微信开放平台的网址是https://open.weixin.qq.com 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 授权流程说明 微信OAuth2.0授权登录