jQuery英文数字组合验证码特效

一个比较好用并容易设置的英文数字组合验证码特效,可以自定义线条干扰线、干扰小点、字体、字体大小、字体颜色等等!

效果如下图:

<div class="layui-form-item">
	<div class="layui-input-block">
		<span class="decrib">验证码:</span>
		<input type="text" placeholder="请输入右侧显示的验证码" class="input-val">
		<canvas id="canvas" width="150px" height="43px">
		</canvas>
	</div>
</div>

<div class="layui-form-item">
	<div class="layui-input-block">
		<button class="layui-btn layui-btn-fluid" id="submit">确定</button>
	</div>
</div>
//验证码上显示线条

for (var i = 0; i <= 5; i++) { 
	context.strokeStyle = randomColor();
	context.beginPath();
	context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
	context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
	context.stroke();
}
//验证码上显示小点

for (var i = 0; i <= 50; i++) {
	context.strokeStyle = randomColor();
	context.beginPath();
	var x = Math.random() * canvas_width;
	var y = Math.random() * canvas_height;
	context.moveTo(x, y);
	context.lineTo(x + 1, y + 1);
	context.stroke();
}

 

相关说明:

1、终身VIP会员无限制任意下载,免积分。即前往开通>>

2、下载积分可通过日常 签到 以及 积分兑换 等途径获得!

3、本站资源无解压密码.

4、本站资源大多存储在云盘,如出现链接失效请评论反馈。

5、本站提供的免费源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!资源仅供参考学习只用,请勿用于任何商业用途,请支持正版。

6、源码、模板等资源会随着技术、环境的升级而存在部分问题,还请慎重选择。

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
南方小强 » jQuery英文数字组合验证码特效

发表评论