木头鱼在线翻译,傲世焚天,邪恶小说
效果图:
1.html代码
1 <div class="form-group" style="display: flex;"> 2 <div> 3 <span>验证码:</span> 4 <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码" /> 5 </div> 6 <div class="login-code" @click="refreshcode"> 7 <!--验证码组件--> 8 <s-identify :identifycode="identifycode"></s-identify> 9 </div> 10 </div>
2.css样式
1 /*验证码样式*/ 2 .code{ 3 width:124px; 4 height:31px; 5 border:1px solid rgba(186,186,186,1); 6 } 7 .login-code{ 8 cursor: pointer; 9 }
3.js引入验证码组件,并且定义三个变量。
import sidentify from '../components/sidentify' components: { sidentify }, data () { return { identifycodes: "1234567890", identifycode: "", code:"",//text框输入的验证码 } },
4.mounted里的代码
1 mounted(){ 2 this.identifycode = ""; 3 this.makecode(this.identifycodes, 4); 4 },
5.在created里初始化验证码
6.methods里添加以下方法。
1 //验证码 2 randomnum(min, max) { 3 return math.floor(math.random() * (max - min) + min); 4 }, 5 6 refreshcode() { 7 this.identifycode = ""; 8 this.makecode(this.identifycodes, 4); 9 }, 10 makecode(o, l) { 11 for (let i = 0; i < l; i++) { 12 this.identifycode += this.identifycodes[ 13 this.randomnum(0, this.identifycodes.length) 14 ]; 15 } 16 console.log(this.identifycode); 17 },
在提交表单的时候对验证码进行判断。
sidentify.vue组件代码:
代码:
1 <template> 2 <div class="s-canvas"> 3 <canvas id="s-canvas" :width="contentwidth" :height="contentheight"></canvas> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: 'sidentify', 9 props: { 10 identifycode: { 11 type: string, 12 default: '1234' 13 }, 14 fontsizemin: { 15 type: number, 16 default: 25 17 }, 18 fontsizemax: { 19 type: number, 20 default: 30 21 }, 22 backgroundcolormin: { 23 type: number, 24 default: 255 25 }, 26 backgroundcolormax: { 27 type: number, 28 default: 255 29 }, 30 colormin: { 31 type: number, 32 default: 0 33 }, 34 colormax: { 35 type: number, 36 default: 160 37 }, 38 linecolormin: { 39 type: number, 40 default: 100 41 }, 42 linecolormax: { 43 type: number, 44 default: 255 45 }, 46 dotcolormin: { 47 type: number, 48 default: 0 49 }, 50 dotcolormax: { 51 type: number, 52 default: 255 53 }, 54 contentwidth: { 55 type: number, 56 default: 112 57 }, 58 contentheight: { 59 type: number, 60 default: 31 61 } 62 }, 63 methods: { 64 // 生成一个随机数 65 randomnum(min, max) { 66 return math.floor(math.random() * (max - min) + min) 67 }, 68 // 生成一个随机的颜色 69 randomcolor(min, max) { 70 let r = this.randomnum(min, max) 71 let g = this.randomnum(min, max) 72 let b = this.randomnum(min, max) 73 return 'rgb(' + r + ',' + g + ',' + b + ')' 74 }, 75 drawpic() { 76 let canvas = document.getelementbyid('s-canvas') 77 let ctx = canvas.getcontext('2d') 78 ctx.textbaseline = 'bottom' 79 // 绘制背景 80 ctx.fillstyle = this.randomcolor(this.backgroundcolormin, this.backgroundcolormax) 81 ctx.fillrect(0, 0, this.contentwidth, this.contentheight) 82 // 绘制文字 83 for (let i = 0; i < this.identifycode.length; i++) { 84 this.drawtext(ctx, this.identifycode[i], i) 85 } 86 this.drawline(ctx) 87 this.drawdot(ctx) 88 }, 89 drawtext(ctx, txt, i) { 90 ctx.fillstyle = this.randomcolor(this.colormin, this.colormax) 91 ctx.font = this.randomnum(this.fontsizemin, this.fontsizemax) + 'px simhei' 92 let x = (i + 1) * (this.contentwidth / (this.identifycode.length + 1)) 93 let y = this.randomnum(this.fontsizemax, this.contentheight - 5) 94 var deg = this.randomnum(-45, 45) 95 // 修改坐标原点和旋转角度 96 ctx.translate(x, y) 97 ctx.rotate(deg * math.pi / 180) 98 ctx.filltext(txt, 0, 0) 99 // 恢复坐标原点和旋转角度 100 ctx.rotate(-deg * math.pi / 180) 101 ctx.translate(-x, -y) 102 }, 103 drawline(ctx) { 104 // 绘制干扰线 105 for (let i = 0; i < 5; i++) { 106 ctx.strokestyle = this.randomcolor(this.linecolormin, this.linecolormax) 107 ctx.beginpath() 108 ctx.moveto(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight)) 109 ctx.lineto(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight)) 110 ctx.stroke() 111 } 112 }, 113 drawdot(ctx) { 114 // 绘制干扰点 115 for (let i = 0; i < 80; i++) { 116 ctx.fillstyle = this.randomcolor(0, 255) 117 ctx.beginpath() 118 ctx.arc(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight), 1, 0, 2 * math.pi) 119 ctx.fill() 120 } 121 } 122 }, 123 watch: { 124 identifycode() { 125 this.drawpic() 126 } 127 }, 128 mounted() { 129 this.drawpic() 130 } 131 } 132 </script> 133 <style scoped> 134 .s-canvas { 135 height: 38px; 136 137 } 138 .s-canvas canvas{ 139 margin-top: 1px; 140 margin-left: 8px; 141 } 142 </style>
这篇文章是我参考别人写的,很感谢那个博主。
登录功能带验证码的例子:https://www.jianshu.com/p/99c6e2f3e457
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论