java生成验证码在vue显示_vue生成随机验证码的示例代码

本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下:

样式自调,最终效果如图:

b942e8b2d82a7ce2d3dfbc3b06496584.png

实现效果:

点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数

HTML

请输入验证码。

JS

// 图片验证码

createCode(){

code = "";

var codeLength = 4;//验证码的长度

var random = 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');//随机数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下代码生成vue随机验证码: ``` <template> <div> <canvas ref="canvas" @click="refreshCode"></canvas> </div> </template> <script> export default { data() { return { code: '', canvasWidth: 120, canvasHeight: 40 } }, mounted() { this.refreshCode(); }, methods: { refreshCode() { let canvas = this.$refs.canvas; let ctx = canvas.getContext('2d'); // 生成随机验证码 let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; let length = 4; let code = ''; for (let i = 0; i < length; i++) { code += chars.charAt(Math.floor(Math.random() * chars.length)); } this.code = code; // 绘制验证码 ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); ctx.font = 'bold 20px Arial'; ctx.fillText(code, 30, 25); // 绘制干扰线 for (let i = 0; i < 5; i++) { ctx.strokeStyle = this.randomColor(40, 180); ctx.beginPath(); ctx.moveTo(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight); ctx.lineTo(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight); ctx.stroke(); } // 绘制干扰点 for (let i = 0; i < 30; i++) { ctx.fillStyle = this.randomColor(0, 255); ctx.beginPath(); ctx.arc(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight, 1, 0, 2 * Math.PI); ctx.fill(); } }, randomColor(min, max) { let r = Math.floor(Math.random() * (max - min) + min); let g = Math.floor(Math.random() * (max - min) + min); let b = Math.floor(Math.random() * (max - min) + min); return `rgb(${r},${g},${b})`; } } } </script> ``` 这段代码使用了canvas绘制验证码,包括验证码生成、绘制、干扰线和干扰点的绘制。在模板中,使用canvas标签引用canvas元素,在mounted函数中调用refreshCode方法生成验证码。refreshCode方法会生成随机验证码并绘制到canvas上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值