css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
input{ width: 200px; height: 32px; border: 1px solid #000; box-sizing: } #c1{ vertical-align: middle; box-sizing: cursor: pointer; } #btn{ display: block; margin-top: 20px; height: 32px; font-size: 16px; } |
HTML代码：
|
1
2
3
4
5
6
|
<div class="code"> <input type="text" value="" id="inputValue" placeholder="请输入验证码（不区分大小写）"> <canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas> <br> <button id="btn">提交</button></div> |
js代码：
使用了部分jQuery的方法，请记得先引入jQuery
|
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
|
$(function(){ // var showNum = [] draw(showNum) $("#c1").click(function(){ draw(showNum) }) $("#btn").click(function(){ var s = $("#inputValue").val().toLowerCase() var s1 = showNum.join("") if (s==s1) { alert("提交成功") }else{ alert("验证码错误") } draw(showNum) }) // function draw(showNum){ // var canvas = $("#c1") var ctx = canvas[0].getContext("2d") // var canvas_width = canvas.width() var canvas_height = canvas.height() // // // ctx.clearRect(0,0,canvas_width,canvas_height) // var scode = "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,1,2,3,4,5,6,7,8,9," var arrCode = scode.split(",") var arrLength = arrCode.length for(var i = var index = var txt = arrCode[index]//随机一个字符 showNum[i] =//转化为小写存入验证码数组 // var x = 10 +20*i //每一个验证码绘制的起始点x坐标 var y = 20 + Math.random()*8// 起始点y坐标 ctx.font ="bold 20px 微软雅黑" // var deg = Math.random*-0.5 // canvas ctx.translate(x,y) ctx.rotate(deg) // ctx.fillStyle = randomColor() ctx.fillText(txt,0,0) // ctx.rotate(-deg) ctx.translate(-x,-y) } for(var i = if (i<5) { // ctx.strokeStyle = randomColor() ctx.beginPath() ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.stroke() } // ctx.strokeStyle = randomColor() ctx.beginPath() var x = Math.random()*canvas_width var y = Math.random()*canvas_height ctx.moveTo(x,y) ctx.lineTo(x+1,y+1) ctx.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})` } }) |
随便写的案例，有错误还请大家多多指教
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/124019.html
