用JS怎样写动态的验证码干扰效果?

发布时间：2022-11-18 11:02:20 所属栏目：语言来源：

导读：　　代码一
　　
　　<!doctype html>
　　<html>
　　<head>
　　<meta charset="utf-8">
　　<title>js简单验证码使用</title>
　　<style>
　　 .code
　　 {
　　 font-family:Arial;
　　 font-styl

　　代码一
　　
　　<!doctype html>
　　<html>
　　<head>
　　<meta charset="utf-8">
　　<title>js简单验证码使用</title>
　　<style>
　　 .code
　　 {
　　 font-family:Arial;
　　 font-style:italic;
　　 color:blue;
　　 font-size:30px;
　　 border:0;
　　 padding:2px 3px;
　　 letter-spacing:3px;
　　 font-weight:bolder;
　　 float:left;
　　 cursor:pointer;
　　 width:150px;
　　 height:50px;
　　 line-height:60px;
　　 text-align:center;
　　 vertical-align:middle;
　　 background-color:#D8B7E3;
　　 }
　　 span {
　　 text-decoration:none;
　　 font-size:12px;
　　 color:#288bc4;
　　 padding-left:10px;
　　 }
　　
　　 span:hover {
　　 text-decoration:underline;
　　 cursor:pointer;
　　 }
　　</style>
　　
　　<script>
　　 //页面加载时，生成随机验证码
　　 window.onload=function(){
　　 createCode(4);
　　 }
　　
　　 //生成验证码的方法
　　 function createCode(length) {
　　 var code = "";
　　 var codeLength = parseInt(length); //验证码的长度
　　 var checkCode = document.getElementById("checkCode");
　　所有候选组成验证码的字符，当然也可以用中文的
　　 var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
　　 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
　　 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
　　'X', 'Y', 'Z');
　　 //循环组成验证码的字符串
　　 for (var i = 0; i < codeLength; i++)
　　 {
　　 //获取随机验证码下标
　　 var charNum = Math.floor(Math.random() * 62);
　　 //组合成指定字符验证码
　　 code += codeChars[charNum];
　　 }
　　 if (checkCode)
　　 {
　　 //为验证码区域添加样式名
　　 checkCode.className = "code";
　　 //将生成验证码赋值到显示区
　　 checkCode.innerHTML = code;
　　 }
　　 }
　　
　　 //检查验证码是否正确
　　 function validateCode()
　　 {
　　 //获取显示区生成的验证码
　　 var checkCode = document.getElementById("checkCode").innerHTML;
　　 //获取输入的验证码
　　 var inputCode = document.getElementById("inputCode").value;
　　 console.log(checkCode);
　　 console.log(inputCode);
　　 if (inputCode.length <= 0)
　　 {
　　 alert("请输入验证码！");
　　 }
　　 else if (inputCode.toUpperCase() != checkCode.toUpperCase())
　　 {
　　 alert("验证码输入有误！");
　　 createCode(4);
　　 }
　　 else
　　 {
　　 alert("验证码正确！");
　　 }
　　 }
　　</script>
　　</head>
　　<body>
　　 <table border="0" cellspacing="5" cellpadding="5" >
　　 <tr>
　　 <td> <div id="checkCode" class="code" onclick="createCode(4)" ></div></td>
　　 <td> <span onclick="createCode(4)">看不清换一张</span></td>
　　 </tr>
　　 <tr>
　　 <td>验证码：</td>
　　 <td><input type="text" id="inputCode" style="float:left;" /></td>
　　 </tr>
　　 <tr>
　　 <td></td>
　　 <td><input type="button" onclick="validateCode()" value="确定" /></td>
　　 </tr>
　　 </table>
　　 </div>
　　</body>
　　</html>
　　代码二
　　
　　<!DOCTYPE html>
　　
　　<html>
　　<head>
　　 <meta charset="UTF-8">
　　 <meta name="viewport" content="width=device-width, initial-scale=1.0">
　　 <meta http-equiv="X-UA-Compatible" content="ie=edge">
　　 <title>canvas验证码</title>
　　</head>
　　<body>
　　 <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的浏览器不支持canvas标签！</canvas>
　　 <script>
　　 var ctx = document.getElementById("check").getContext("2d");
　　 var ctxW = document.getElementById("check").clientWidth;
　　 var ctxH = document.getElementById("check").clientHeight;
　　 /**
　　 * 产生一个随机数可设置随机数区间
　　 * @param {[Number]} min [随机数区间下限]
　　 * @param {[Number]} max [随机数区间上限]
　　 * @return {[Number]} [返回一个在此区间的随机数]
　　 */
　　
　　 function ranNum(min, max) {
　　 return Math.random() * (max - min) + min;
　　 }
　　 /**
　　 * 返回一个随机颜色可设置颜色区间
　　 * @param {[Number]} min [颜色下限]
　　 * @param {[Number]} max [颜色上限]
　　 * @return {[String]} [随机颜色]
　　 */
　　
　　 function ranColor(min, max) {
　　 var r = ranNum(min, max);
　　 var g = ranNum(min, max);
　　 var b = ranNum(min, max);
　　 // return "rgb(" + r + "," + g + "," + b + ")";
　　 return `rgb(${r},${g},${b})`;
　　 }
　　 /**
　　 * 随机字符串数组
　　 * @return {[Array]} [随机数组]
　　 */
　　 function ranStr() {
　　 var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
　　 return str.split("").sort(function () {
　　 return Math.random() - 0.5
　　 });
　　 }
　　
　　 /**
　　 * 绘制文本字符串
　　 * @param {[String]} canvasId [canvas的id]
　　 * @param {[Number]} canvasW [canvas的width]
　　 * @param {[Number]} canvasH [canvas的height]
　　 * @param {[Number]} num [绘制验证码的字数]
　　 * @param {[Number]} fsMin [字体大小下限]
　　 * @param {[Number]} fsMax [字体大小上限]
　　 * @param {[Number]} frMin [字体旋转偏移下限]
　　 * @param {[Number]} frMax [字体旋转偏移上限]
　　 * @param {[Number]} min [颜色下限]
　　 * @param {[Number]} max [颜色上限]
　　 * @return {[String]} [随机字符串]
　　 */
　　
　　 function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
　　 var str = "";
　　 for (var i = 0; i < num; i++) {
　　 var char = ranStr()[Math.floor(0, ranStr().length)];
　　 var fs = ranNum(fsMin, fsMax);
　　 canvasId.font = fs + "px Verdana";
　　 canvasId.fillStyle = ranColor(min, max);
　　 // 保存绘制的状态
　　 canvasId.save();
　　 // context.translate(x,y);
　　 // x 添加到水平坐标（x）上的值
　　 // y 添加到垂直坐标（y）上的值
　　 // 偏移
　　
　　 canvasId.translate(canvasW / num * i + canvasW / 20, 0);
　　 // 变换角度
　　 canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
　　 // context.fillText(text,x,y,maxWidth);
　　 // text 规定在画布上输出的文本。
　　 // x 开始绘制文本的 x 坐标位置（相对于画布）。
　　 // y 开始绘制文本的 y 坐标位置（相对于画布）。
　　 // maxWidth 可选。允许的最大文本宽度，以像素计。
　　 canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);
　　 // 返回之前保存过的路径状态和属性
　　 ctx.restore();
　　 str += char;
　　 }
　　
　　 // console.log(str);
　　 return str;
　　 }
　　
　　 /**
　　 * 绘制背景
　　 * @param {[String]} canvasId [canvas的id]
　　 * @param {[Number]} canvasW [canvas的width]
　　 * @param {[Number]} canvasH [canvas的height]
　　 * @param {[Number]} min [下限]
　　 * @param {[Number]} max [上限]
　　 */
　　
　　 function drawBg(canvasId, canvasW, canvasH, min, max) {
　　 // 绘制canvas背景
　　 canvasId.fillStyle = ranColor(min, max);
　　 // 填充颜色
　　 canvasId.fillRect(0, 0, canvasW, canvasH);
　　 }
　　
　　 /**
　　 * 绘制干扰圆点
　　 * @param {[String]} canvasId [canvas的id]
　　 * @param {[Number]} canvasW [canvas的width]
　　 * @param {[Number]} canvasH [canvas的height]
　　 * @param {[Number]} num [绘制的数量]
　　 * @param {[Number]} r [圆点半径]
　　 * @param {[Number]} min [下限]
　　 * @param {[Number]} max [上线]
　　 */
　　
　　 function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {
　　 for (var i = 0; i < num; i++) {
　　 // 开始绘制（拿起笔）
　　 canvasId.beginPath();
　　 // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （绘制）
　　 // x 圆的中心的 x 坐标。
　　 // y 圆的中心的 y 坐标。
　　 // r 圆的半径。
　　 // sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
　　 // eAngle 结束角，以弧度计。
　　 // counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
　　 canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);
　　
　　
　　 // 填充颜色
　　 canvasId.fillStyle = ranColor(min, max);
　　
　　 // 填充
　　 canvasId.fill();
　　
　　 // 闭合绘制（放开笔）
　　 canvasId.closePath();
　　 }
　　 }
　　
　　 /**
　　 * 绘制干扰线段
　　 * @param {[String]} canvasId [canvas的id]
　　 * @param {[Number]} canvasW [canvas的width]
　　 * @param {[Number]} canvasH [canvas的height]
　　 * @param {[Number]} num [绘制的数量]
　　 * @param {[Number]} min [下限]
　　 * @param {[Number]} max [上线]
　　 */
　　
　　 function drawLine(canvasId, canvasW, canvasH, num, min, max) {
　　 for (var i = 0; i < num; i++) {
　　 // 开始绘制（拿起笔）
　　 canvasId.beginPath();
　　 // 绘制开始点
　　 canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
　　 // 绘制结束点
　　 canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
　　 canvasId.strokeStyle = ranColor(min, max);
　　 canvasId.stroke();
　　 canvasId.closePath();
　　 }
　　 }
　　 // 绘制验证码
　　 function drawCanvas() {
　　 // 清空canvas
　　 ctx.clearRect(0, 0, 200, 60);
　　 // 绘制背景
　　 drawBg(ctx, ctxW, ctxH, 200, 255);
　　 // 绘制干扰圆点
　　 drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
　　 // 绘制干扰线段
　　 drawLine(ctx, ctxW, ctxH, 20, 0, 255);
　　 // 绘制验证码
　　 var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
　　 return str;
　　 }
　　 drawCanvas();
　　 document.getElementById('check').onclick = drawCanvas;
　　 </script>
　　</body>
　　
　　</html>

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

用JS怎样写动态的验证 码干扰效果?

用JS怎样写动态的验证码干扰效果?