帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS前端随机生成验证码
JS前端随机生成验证码
浏览:598次
-
评论:0次
-
发布时间:2018-09-08
Html
Css
Js
看不清,换一张
验证
.box { width:300px; height:150px; border:1px solid; margin:30px auto; position:relative; } .code { width:120px; height:40px; background-color:#D6E3BC; border:2px solid; text-align:center; font-size:24px; line-height:40px; position:absolute; top:20px; left:20px; letter-spacing:3px; } a { position:absolute; left:160px; top:30px; color:green; } input { width:180px; height:20px; top:90px; left:20px; position:absolute; } button { width:50px; height:26px; position:absolute; top:90px; right:26px; background-color:green; color:#fff; border:1px solid gray; }
/*实现点击“看不清,换一张”随机生成六位验证码(可包含数字和大小写字母)*/ this.code; var Input = document.querySelector("#Input"); var btn = document.querySelector("#btn"); var subBtn = document.querySelector("#subBtn"); window.onload = function() { yzm.createCode(); } init(); function init() { subBtn.onclick = function() { yzm.isLegal() } btn.onclick = function() { yzm.createCode(); } } var yzm = { createCode: function() { this.code = ""; //存放验证码 var codeLength = 6; //设置验证码长度为6 var checkCode = document.querySelector("#checkCode"); var codeChars = 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', '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'); //验证码要随机挑选的字符 for (var i = 0; i < codeLength; i++) { var charIndex = Math.floor(Math.random() * 52); //随机产生0-52之间的整数 this.code += codeChars[charIndex]; //将随机指向我们规定的字符添加到code容器里 } if (checkCode) { checkCode.className = "code"; checkCode.innerHTML = this.code; } }, isLegal: function() { var InputValue = Input.value; /*console.log(InputValue); console.log(this.code);*/ if (InputValue == this.code) { alert("验证码正确!"); } else { alert("验证码不正确,请重试!"); } } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>JS前端随机生成验证码-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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:前端本地随机生成验证码(面向对象方式)
Select多选下拉框特效
原生JS分页效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
598
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值