帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 超级好看的前端图形验证码
超级好看的前端图形验证码
浏览:658次
-
评论:2次
-
发布时间:2021-03-06
Html
Css
Js
点击图片重新生成验证码
提交
#verify { height:34px; vertical-align:top; font-size:16px; } #code_img { width:100px; height:40px; cursor:pointer; vertical-align:top; }
var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", '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' ]; var colors = [] drawCode(); // 绘制验证码 function drawCode() { var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布 var context = canvas.getContext("2d"); //获取画布2D上下文 context.fillStyle = "cornflowerblue"; //画布填充色 context.fillRect(0, 0, canvas.width, canvas.height); // 创建渐变 var gradient = context.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); //清空画布 context.fillStyle = gradient; //设置字体颜色 context.font = "25px Arial"; //设置字体 var rand = new Array(); var x = new Array(); var y = new Array(); for (var i = 0; i < 4; i++) { rand[i] = nums[Math.floor(Math.random() * nums.length)] x[i] = i * 16 + 10; y[i] = Math.random() * 20 + 20; context.fillText(rand[i], x[i], y[i]); } // console.log(rand); //画3条随机线 for (var i = 0; i < 3; i++) { drawline(canvas, context); } // 画30个随机点 for (var i = 0; i < 30; i++) { drawDot(canvas, context); } convertCanvasToImage(canvas) // 点击提交进行验证 $("#submit").click((e) => { var newRand = rand.join('').toUpperCase(); console.log(newRand); //下面就是判断是否== 的代码,无需解释 var oValue = $('#verify').val().toUpperCase(); console.log(oValue) if (oValue == 0) {} else if (oValue != newRand) { oValue = ' '; } else { window.open('http://www.baidu.com', '_self'); } }) } // 随机线 function drawline(canvas, context) { context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置,y坐标是画布高度的随机数 context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度,y坐标是画布高度的随机数 context.lineWidth = 0.5; //随机线宽 context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性 context.stroke(); //描边,即起点描到终点 } // 随机点(所谓画点其实就是画1px像素的线,方法不再赘述) function drawDot(canvas, context) { var px = Math.floor(Math.random() * canvas.width); var py = Math.floor(Math.random() * canvas.height); context.moveTo(px, py); context.lineTo(px + 1, py + 1); context.lineWidth = 0.2; context.stroke(); } // 绘制图片 function convertCanvasToImage(canvas) { document.getElementById("verifyCanvas").style.display = "none"; var image = document.getElementById("code_img"); image.src = canvas.toDataURL("image/png"); return image; } // 点击图片刷新 document.getElementById('code_img').onclick = function() { $('#verifyCanvas').remove(); $('#verify').after('
') drawCode(); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>超级好看的前端图形验证码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:非常好用的前端验证码
非常好用的前端验证码
jQuery切割轮播图
jQuery弹出式队列提示框代码
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv4 码徒
qq***17
2021年03月26日
确实是非常好用的前端验证码
回复
Lv7 码师
wx***52
2021年04月15日
这效果杠杠的,谢谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
658
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值