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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
Js四则运算函数代码
Jul 21 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
如何编写一个 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 手机归属地查询 api
2010/02/08 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Python单例模式实例详解
2017/03/01 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python opencv摄像头的简单应用
2019/06/06 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
大学生实习思想汇报
2014/01/12 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
结婚老公保证书
2015/02/26 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技