Trung tâm cá nhân
sách gpt4 ăn đã đi

js triển khai can thiệp mã xác minh (động)

In lại Tác giả: qq735679552 Thời gian cập nhật: 28-09-2022 22:32:09 33 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

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

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

效果一 。

js triển khai can thiệp mã xác minh (động)

效果二 。

js triển khai can thiệp mã xác minh (động)

代码一 。

?
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
< html >
< cái đầu >
< siêu dữ liệu bộ ký tự = "utf-8" >
< tiêu đề >js简单验证码使用 tiêu đề >
< phong cách >
  .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;
  }
phong cách >
 
< kịch bản >
  //页面加载时，生成随机验证码
  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++)
  {
  //获取随机验证码下标
  của chúng tôi charNum = Toán học .floor(Math.random() * 62);
  //组合成指定字符验证码
  code += codeChars[charNum];
  }
  if (checkCode)
  {
  //为验证码区域添加样式名
  checkCode.className = "mã số" ;
  //将生成验证码赋值到显示区
  checkCode.innerHTML = mã số ;
  }
  }
 
  //检查验证码是否正确
  function validateCode()
  {
  //获取显示区生成的验证码
  của chúng tôi checkCode = tài liệu .getElementById("checkCode").innerHTML;
  //获取输入的验证码
  của chúng tôi inputCode = tài liệu .getElementById("inputCode").giá trị;
  console.log(checkCode);
  console.log(mã đầu vào);
  nếu (inputCode.length <= 0)
  {
  cảnh báo ("Vui lòng nhập mã xác minh!");
  }
  nếu không thì nếu (inputCode.toUpperCase() != checkCode.toUpperCase())
  {
  cảnh báo ("Mã xác minh đã nhập không chính xác!");
  createCode(4);
  }
  khác
  {
  cảnh báo ("Mã xác minh là chính xác!");
  }
  }
cái đầu >
< thân hình >
  < bàn ranh giới = "0" khoảng cách giữa các ô = "5" đệm tế bào = "5" >
  < tr >
  < td > < phân chia nhận dạng = "mã kiểm tra" lớp học = "mã số" nhấp chuột = "createCode(4)" > phân chia > td >
  < td > < khoảng cách nhấp chuột = "createCode(4)" >Nếu không nhìn rõ thì đổi cái khác khoảng cách > td >
  tr >
  < tr >
  < td >Mã xác minh: td >
  < td >< đầu vào kiểu = "chữ" nhận dạng = "Mã đầu vào" phong cách = "float:trái;" /> td >
  tr >
  < tr >
  < td > td >
  < td >< đầu vào kiểu = "cái nút" nhấp chuột = "xác thực mã()" giá trị = "Chắc chắn" /> td >
  tr >
  bàn >
  phân chia >
thân hình >
html >

Mã hai.

?
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
 
< html >
< cái đầu >
  < siêu dữ liệu bộ ký tự = "UTF-8" >
  < siêu dữ liệu tên = "khung nhìn" nội dung = "width=chiều rộng thiết bị, tỷ lệ ban đầu=1.0" >
  < siêu dữ liệu http-tương đương = "Tương thích với X-UA" nội dung = "ie=cạnh" >
  < tiêu đề >mã xác minh canvas tiêu đề >
cái đầu >
< thân hình >
  < canvas chiều rộng = "200" chiều cao = "60" nhận dạng = "kiểm tra" phong cách = "viền:1px rắn #000;" >Trình duyệt của bạn không hỗ trợ thẻ canvas! canvas >
  < kịch bản >
  var ctx = document.getElementById("kiểm tra").getContext("2d");
  var ctxW = document.getElementById("kiểm tra").clientWidth;
  var ctxH = document.getElementById("kiểm tra").clientHeight;
  /**
  * Tạo số ngẫu nhiên và đặt khoảng số ngẫu nhiên
  * @param {[Số]} phút [giới hạn dưới của khoảng số ngẫu nhiên]
  * @param {[Số]} tối đa [giới hạn trên của khoảng số ngẫu nhiên]
  * @return {[Number]} [Trả về một số ngẫu nhiên trong phạm vi này]
  */
 
  hàm ranNum(min, max) {
  trả về Math.random() * (tối đa - tối thiểu) + tối thiểu;
  }
  /**
  * Trả về một màu ngẫu nhiên với dải màu có thể định cấu hình
  * @param {[Số]} phút [giới hạn màu thấp hơn]
  * @param {[Số]} tối đa [giới hạn trên của màu]
  * @return {[Chuỗi]} [màu ngẫu nhiên]
  */
 
  hàm ranColor(min, max) {
  var r = ranNum(min, max);
  var g = ranNum(min, max);
  var b = ranNum(min, max);
  // trả về "rgb(" + r + "," + g + "," + b + ")";
  trả về `rgb(${r},${g},${b})`;
  }
  /**
  * Mảng chuỗi ngẫu nhiên
  * @return {[Mảng]} [mảng ngẫu nhiên]
  */
  hàm ranStr() {
  var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
  trả về str.split("").sort(hàm () {
  trả về Math.random() - 0.5
  });
  }
 
  /**
  * Vẽ chuỗi văn bản
  * @param {[String]} canvasId [id canvas]
  * @param {[Số]} canvasW [chiều rộng của canvas]
  * @param {[Số]} canvasH [chiều cao của canvas]
  * @param {[Số]} num [số từ để rút mã xác minh]
  * @param {[Số]} fsMin [Kích thước phông chữ tối thiểu]
  * @param {[Số]} fsMax [Kích thước phông chữ tối đa]
  * @param {[Số]} frMin [Giới hạn dưới bù xoay phông chữ]
  * @param {[Số]} frMax [giới hạn trên bù xoay phông chữ]
  * @param {[Số]} phút [giới hạn màu thấp hơn]
  * @param {[Số]} tối đa [giới hạn trên của màu]
  * @return {[Chuỗi]} [chuỗi ngẫu nhiên]
  */
 
  hàm drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
  var str = "";
  for (var i = 0; i < trong một ; tôi++) {
  của chúng tôi char = ranStr ()[Math.floor(0, ranStr().length)];
  của chúng tôi fs = chạyNum (fsMin, fsMax);
  canvasId. phông chữ = fs + "px Verdana";
  canvasId. fillStyle = chạyMàu sắc (tối thiểu, tối đa);
  // Lưu trạng thái vẽ
  canvasId.save();
  // ngữ cảnh.dịch(x,y);
  // giá trị x được thêm vào tọa độ ngang (x)
  // giá trị y được thêm vào tọa độ dọc (y)
  //bù lại
 
  canvasId.translate(canvasW / số * i + canvasW / 20, 0);
  // thay đổi góc
  canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
  // ngữ cảnh.fillText(văn bản, x, y, chiều rộng tối đa);
  // text chỉ định đầu ra văn bản trên canvas.
  // x Vị trí tọa độ x (so với canvas) để bắt đầu vẽ văn bản.
  // y Vị trí tọa độ y (so với khung vẽ) để bắt đầu vẽ văn bản.
  // maxWidth tùy chọn. Chiều rộng văn bản tối đa được phép, tính bằng pixel.
  canvasId.fillText(ký tự, 0, (canvasH + fs) / 2,5, canvasW / số);
  // Trả về trạng thái và thuộc tính đường dẫn đã lưu trước đó
  ctx.restore();
  chuỗi += ký tự;
  }
 
  // console.log(chuỗi);
  trả về chuỗi;
  }
 
  /**
  * Vẽ nền
  * @param {[String]} canvasId [id canvas]
  * @param {[Số]} canvasW [chiều rộng của canvas]
  * @param {[Số]} canvasH [chiều cao của canvas]
  * @param {[Số]} phút [giới hạn dưới]
  * @param {[Số]} tối đa [giới hạn trên]
  */
 
  hàm drawBg(canvasId, canvasW, canvasH, min, max) {
  // Vẽ nền canvas
  canvasId. fillStyle = chạyMàu sắc (tối thiểu, tối đa);
  // tô màu
  canvasId. fillRect(0, 0, canvasW, canvasH);
  }
 
  /**
  * Vẽ các chấm giao thoa
  * @param {[String]} canvasId [id canvas]
  * @param {[Số]} canvasW [chiều rộng của canvas]
  * @param {[Số]} canvasH [chiều cao của canvas]
  * @param {[Số]} num [số lần rút]
  * @param {[Số]} r [bán kính điểm]
  * @param {[Số]} phút [giới hạn dưới]
  * @param {[Số]} tối đa [trực tuyến]
  */
 
  hàm drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {
  cho (var Tôi = 0 ; i < số; i++) {
  // Bắt đầu vẽ (nhấc bút lên)
  canvasId. beginPath();
  // context.arc(x,y,r,sAngle,eAngle,ngược chiều kim đồng hồ);
  // x x tọa độ tâm đường tròn.
  // y Tọa độ y của tâm đường tròn.
  // r Bán kính của đường tròn.
  // sAngle Góc bắt đầu, tính bằng radian. (Vị trí 3 giờ của vòng cung là 0 độ).
  // eAngle Góc cuối, tính bằng radian.
  // ngược chiều kim đồng hồ tùy chọn. Chỉ định xem nên vẽ đồ thị ngược chiều kim đồng hồ hay theo chiều kim đồng hồ. Sai = theo chiều kim đồng hồ, đúng = ngược chiều kim đồng hồ.
  canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);
 
 
  // tô màu
  canvasId. fillStyle = chạyMàu sắc (tối thiểu, tối đa);
 
  // đổ đầy
  canvasId. fill();
 
  // Đóng bản vẽ (nhả bút)
  canvasId. closePath();
  }
  }
 
  /**
  * Vẽ các đoạn đường giao thoa
  * @param {[String]} canvasId [id canvas]
  * @param {[Số]} canvasW [chiều rộng của canvas]
  * @param {[Số]} canvasH [chiều cao của canvas]
  * @param {[Số]} num [số lần rút]
  * @param {[Số]} phút [giới hạn dưới]
  * @param {[Số]} tối đa [trực tuyến]
  */
 
  hàm drawLine(canvasId, canvasW, canvasH, num, min, max) {
  cho (var Tôi = 0 ; i < số; i++) {
  // Bắt đầu vẽ (nhấc bút lên)
  canvasId. beginPath();
  // Vẽ điểm bắt đầu
  canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
  // Vẽ điểm cuối
  canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
  canvasId.strokeStyle = chạyMàu sắc (tối thiểu, tối đa);
  canvasId.đột quỵ();
  canvasId. closePath();
  }
  }
  // Vẽ mã xác minh
  hàm drawCanvas() {
  // khung vẽ rõ ràng
  ctx.clearRect(0, 0, 200, 60);
  // vẽ nền
  drawBg(ctx, ctxW, ctxH, 200, 255);
  // Vẽ các chấm giao thoa
  vẽ vòng tròn(ctx, ctxW, ctxH, 20, 5, 200, 255);
  // Vẽ các đoạn đường giao thoa
  drawLine(ctx, ctxW, ctxH, 20, 0, 255);
  // Vẽ mã xác minh
  của chúng tôi đường = vẽ văn bản (ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
  trả về chuỗi;
  }
  drawCanvas();
  document.getElementById('kiểm tra') .khi nhấp chuột = vẽVải ;
 
thân hình >
 
html >

Trên đây là toàn bộ nội dung bài viết này hi vọng nó sẽ giúp ích cho việc học của mọi người và cũng mong mọi người ủng hộ mình.

Liên kết gốc: https://blog.csdn.net/weixin_44635198/article/details/113921887.

Cuối cùng, bài viết này về việc triển khai can thiệp mã xác minh (động) trong js kết thúc tại đây. Nếu bạn muốn biết thêm về việc triển khai can thiệp mã xác minh (động) trong js, vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục duyệt qua các bài viết liên quan. Tôi hy vọng tất cả các bạn ủng hộ blog của tôi trong tương lai! .

33 4 0
Đề xuất bài viết: JS canvas triển khai các chức năng bảng vẽ và bảng chữ ký
Đề xuất bài viết: 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Đề xuất bài viết: js triển khai can thiệp mã xác minh (tĩnh)
Đề xuất bài viết: JavaScript thực hiện chức năng nhận tiền vàng trong H5 (code ví dụ)
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress