个人中心
gpt4 book ai didi

js实现验证码干扰(动态)

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现验证码干扰(动态)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下 。

效果一 。

js实现验证码干扰(动态)

效果二 。

js实现验证码干扰(动态)

代码一 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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 >

代码二 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!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 >

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_44635198/article/details/113921887 。

最后此篇关于js实现验证码干扰(动态)的文章就讲到这里了,如果你想了解更多关于js实现验证码干扰(动态)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： JS canvas实现画板和签字板功能
文章推荐： 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
文章推荐： js实现验证码干扰（静态）
文章推荐： JavaScript实现H5接金币功能(实例代码)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com