JavaScript生成验证码

通过Math.random()生成0~1的随机数，toString(36)将生成的随机数转换为36进制，因为36进制会包含所有的小数和小写字母，substr(3,5)截取字符串，从第3位起往后取5位。前两位是0，所以只从第3位起。具体详情如下：

html部分

<div class="main"><div class="yzbjt"></div><div class="updataYzm">点击图片，更换验证码</div><div style="clear: both;"></div><input type="text" placeholder="请输入验证码" maxlength="5" class="yzinp"><button class="yzBtn">验证</button><div class="yzMsg"></div>
</div>

JavaScript部分

//   获取元素var yzbjt = document.querySelector('.yzbjt');var yzinp = document.querySelector('.yzinp');var yzBtn = document.querySelector('.yzBtn');var yzMsg = document.querySelector('.yzMsg')var updataYzm = document.querySelector('.updataYzm')updataYzm.onclick = function() {yzbjt.innerHTML = getCode();}// 生成验证码函数，生成五位随机数字或小写字母var getCode = function() {//   Math.random()生成0~1的随机数，小数位在16或17位//  toString(36)转换为36进制，因为36进制会包含所有的小数和小写字母//    substr(3,5)截取字符串，从第3位起往后取5位。前两位是0，所以只从第3位起var code = Math.random().toString(36).substr(3, 5);//  返回验证码return code;}yzinp.addEventListener('keyup',function(event) {event.preventDefault()if(event.keyCode === 13) {yzBtn.click();}})yzBtn.onclick = function() {if(yzbjt.innerHTML == yzinp.value) {yzMsg.innerHTML = '验证码正确'}else{yzMsg.innerHTML = '请输入正确的验证码'}}//   点击验证码更换验证码yzbjt.onclick = function() {yzbjt.innerHTML = getCode();}// 网页载入的时候就出现验证码yzbjt.click();

style样式部分

.main {max-width: 1200px;height: 300px;margin: 0 auto;}.yzbjt {width: 100%;height: 50px;background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2020.cnblogs.com%2Fblog%2F1967562%2F202003%2F1967562-20200313212309072-728974878.jpg&refer=http%3A%2F%2Fimg2020.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672973655&t=502b34b182eca0c0b40e9f953e092cea');font-size: 28px;font-style: italic;/* 字体斜体 */letter-spacing: 10px;/* 字体间距 */cursor: pointer;/* 鼠标放入变小手 */text-align: center;line-height: 50px;user-select: none;}.updataYzm {color: blue;font-size: 12px;float: right;margin: 10px 0;}.yzinp {width: 100%;height: 40px;margin: 10px 0;box-sizing: border-box;/* 去掉内边距和边框对盒子的影响 */}.yzBtn {width: 100%;height: 40px;}

JavaScript生成验证码相关推荐

使用Javascript生成验证码
验证码作用:验证你是否是机器人 1.简单的验证码:6位纯数字组成的验证码(非常容易破解) 代码如下: function numTestCode(n){ var arr = []; //存储生成的数字 ...
JavaScript 生成随机验证码
JavaScript 生成随机验证码文章目录 JavaScript 生成随机验证码 Math对象下 random方法
html5 cs js字母验证码,JavaScript生成图形验证码
本文实例为大家分享了js生成图形验证码的具体代码,供大家参考,具体内容如下 getGVerify:function (id) { function GVerify(options) { //创建一个图 ...
JavaScript生成图形验证码
getGVerify:function (id){function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数this.options = { // ...
使用kaptcha生成验证码
2019独角兽企业重金招聘Python工程师标准>>> kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用k ...
生成验证码点击可刷新
我把生成验证码与生成验证码图片封装成一个静态方法,放到ValidateCode类里 /// <summary> /// 生成验证码的类 /// </summary> publi ...
Java Web学习总结（22）——使用kaptcha生成验证码
kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 一.搭建测试环境 ...
转: 通过Servlet生成验证码图片
孤傲苍狼只为成功找方法,不为失败找借口! javaweb学习总结(九)-- 通过Servlet生成验证码图片一.BufferedImage类介绍生成验证码图片主要用到了一个BufferedIma ...
artdialog 异步加载页面生成验证码
artdialog 异步加载一个页面需求:例如现在好多网站的登录或注册都是点击弹出一个层出来然后在上面登录.注册这个登录可能在网站的每个页面都会有,但是我们又不能在每个页面都这一段html加 ...

JavaScript生成验证码

JavaScript生成验证码相关推荐

最新文章

热门文章