编写生成算数验证码的代码
var width = 100; //宽度
var height = 40; //高度
var fontSize = height-20; //字体大小
var str = "+-*";
//随机生成最大值不超过max的整数
function randInt(max) {
return Math.floor(Math.random()*100000%max);
}
//生成随机长度的字符串验证码
function randCode(lng) {
var first = randInt(100);
var second = randInt(100);
var op = str.charAt(randInt(str.length));
return ""+first+op+second+"=";
}
//生成随机颜色
function randColor() {
var r = randInt(256);
var g = randInt(256);
var b = randInt(256);
return "rgb("+r+","+g+","+b+")";
}
//绘制图片
function drawCode(canvas) {
var vailCode = randCode();
width = 5+fontSize*vailCode.length;
if (canvas !=null && canvas.getContext && canvas.getContext("2d")){
//设置显示区域大小
canvas.style.width=width;
//设置画板高宽
canvas.setAttribute("width",width);
canvas.setAttribute("height",height);
//得到画笔
var pen = canvas.getContext("2d");
//绘制背景
pen.fillStyle = "rgb(255,255,255)";
pen.fillRect(0,0,width,height);
//设置值水平线位置
pen.textBaseline = "top";
//绘制内容
for (var i=0;i<vailCode.length;i++){
pen.fillStyle = randColor();
pen.font="blod"+(fontSize+randInt(3))+"px 微软雅黑";
pen.fillText(vailCode.charAt(i),5+fontSize*i,randInt(5));
}
//绘制噪音线
for (var i=0;i<2;i++){
pen.moveTo(randInt(width)/2,randInt(height)); //设置起点
pen.lineTo(randInt(width),randInt(height)); //设置终点
pen.strokeStyle = randColor();
pen.lineWidth =2; //线条粗细
pen.stroke();
}
vailCode = vailCode.substr(0,vailCode.length-1);
//eval函数,把字符串当表达式处理
return eval(vailCode);
}
}
前端页面展示代码:
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/2/11
Time: 16:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>利用jquery实现算数验证码</title>
<style type="text/css">
.code_a {
color: #0000ff;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
#cvs {
cursor: pointer;
}
</style>
<%--引入jquery文件--%>
<script src="js/mathCode.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var vailCode;
function changeCode() {
var cvs = document.getElementById("cvs");
vailCode = drawCode(cvs);
}
function vailCodes() {
var code = document.getElementById("inputCode").value;
if (code.toString() == vailCode.toString()) {
return true;
}else {
document.getElementById("errMsg").innerHTML="验证码输入错误";
changeCode();
return false;
}
}
window.onload = changeCode; //加载页面显示验证码
</script>
<body>
<form action="success.jsp" method="post">
<label>验证码:</label>
<input type="text" id="inputCode" name="inputCode" placeholder="输入验证码,大小写无关"/>
<%--此处src的名称codeImage与web.xml中配置的<url-pattern>/codeImage</url-pattern>名称相同--%>
<canvas id="cvs" onclick="changeCode()"></canvas>
<a class="code_a" onclick="changeCode()">看不清!切换一张</a><br>
<input type="submit" value="登录" onclick="return vailCodes()">
</form>
<div style="color: #ff0000;" id="errMsg"></div>
</body>
</html>
生成的效果如图:
验证成功后跳转页面