JS实现4位随机验证码


Posted in Javascript onOctober 19, 2020

本文实例为大家分享了JS实现4位随机验证码的具体代码,供大家参考,具体内容如下

通过随机数编写一个不分大小写且含数字的4位随机数。

CSS样式

p{
 width: 60px;
 height: 20px;
 display: inline-block;
 letter-spacing: 3px;
 border: 1px solid red;
}
#div{
 height: 20px;
 margin-bottom: 10px;
}
#btn,p:hover{
 cursor: default;
}
button{
 display: block;
}

主体部分

<div id="box">
验证码
 <input type="text" id="int" />
 <p id="p"></p>
 <div id="div"></div>
 <button id="btn">提交</button>
</div>

JS部分

//随机数
function random(max,min){
 return Math.round(Math.random()*(max-min)+min);
}
//随机4位验证码
function code(){
 //将数字、小写字母及大写字母输入
 var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
 //给一个空字符串
 var res='';
 //循环4次,得到4个字符
 for(var i=0;i<4;i++){
 //将得到的结果给字符串,调用随机函数,0最小数,62表示数字加字母的总数
 res+=str[random(0,62)];
 }
 p.innerHTML=res;
}
code(); //调用验证码函数
p.onclick=code; //点击也可以刷新验证码
//验证验证码
btn.onclick=function(){
 var int=document.getElementById("int").value;//获取用户输入的值
 var p=document.getElementById("p").innerText;//获取验证码
 //判断用户输入与验证码的大写一致(不分大小写)
 if(int.toUpperCase()==p.toUpperCase()){
 div.innerHTML="验证码正确";
 }else{
 div.innerHTML="验证码错误";
 }
}

实现结果

JS实现4位随机验证码

总结

Math.round():四舍五入
Math.random():随机数
toUpperCase():将字符串转为大写

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 #Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 #Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 #Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 #Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 #Javascript
You might like
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
单位实习证明怎么写
2014/01/17 职场文书
如何写自我鉴定
2014/03/19 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
转让协议书
2015/01/27 职场文书
2015年工商所工作总结
2015/05/21 职场文书